Question

我正在尝试在鼠标上创建图像的闪烁动画。我希望动画在第一次鼠标悬停时只调用一个。要调用另一个闪烁动画，用户必须先将光标拉出图像，然后再次将其悬停。但即使我没有拉动图像的光标并重新悬停它（在图像内部运行光标，动画多次调用），它仍然被调用。

$(document).ready(function () {
    $("div.left > .img > img").mouseenter(function () {
        $("div.left > .flick").show();
        $("div.left > .flick").fadeOut();
    });
});

Please take a look at my code here

P / S：抱歉我的英语不好，解释不好

Answer 1

这是一个相当普遍的问题，经常被忽视。

显示叠加层时，会立即从下方的图像中移除焦点。当它淡出时，当鼠标移动时焦点会重新放回图像，这意味着动画不止一次发生。问题是由于失去焦点造成的。

http://jsfiddle.net/QPMT5/1/

您需要做的就是将选择器更改为容器，这意味着仅当鼠标离开容器，而不是图像元素时，焦点才会丢失：< / p>

$("div.left").mouseenter(function () {
    $("div.left > .flick").show();
    $("div.left > .flick").fadeOut();
});

我已将div.left > .img > img更改为div.left。显示此行为的稍微清洁版here。

使用jquery创建闪烁动画

1 个答案: