Question

奇怪的问题。

使用jquery ui效果如下：

<a href="in" style="position:absolute;" ><img src="images/img.png" id="perlabot"  ></a>
$('#perlabot').on('mouseenter', function () {
     $(this).effect("shake", { times:2, distance: 3}, 120);
});

它可以工作但是在IE和Firefox上，即使鼠标位于图像中间，图像也会一直抖动。似乎动态图像一直在试图抓住mouseenter事件？无法解决这个奇怪的问题。在Chrome上，它只有一次。

Answer 1

我没有找到问题的真正解决方案，但您可以通过检查变量是否具有某个值来轻松避免它，并在用户离开该区域时重置它。

var active = false;
$('#perlabot').on('mouseenter', function () {
    if (active === false) {
        active = true;
        $(this).effect("shake", {
            times: 2,
            distance: 3
        }, 120);
    }
}).mouseleave(function () {
    active = false;
});

可能不是解决它的最聪明的方法，但它在我测试的每个浏览器中都能正常工作（Firefox，Chrome，Opera，IE 10和9）

jsfiddle

Answer 2

尝试此选项。与上述答案类似的概念，但我认为更强大。（例如，没有全局状态变量）

function shakeIt(obj)
{
    obj.mouseleave(function () {
        obj.on("mouseenter", function () { shakeIt(obj); });
        obj.off("mouseleave");
    });
    obj.off("mouseenter");
    obj.effect("shake", { distance: "3", times: "2" }, 120);
}
$("#perlabot").on("mouseenter", function () { shakeIt($(this)); });

Jquery ui摇动效果不断触发

2 个答案: