0

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

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

请在这里查看我的代码

P/S：对不起我的英语不好和解释不好

4

1 回答 1

2

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

当您的叠加层显示时，它会暂时从下面的图像中移除焦点。当它淡出时，焦点会在鼠标移动时重新回到图像上，这意味着动画会发生不止一次。问题是由这种失去焦点引起的。

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

您需要做的就是将您的选择器更改为容器，这意味着只有当鼠标离开容器时才会失去焦点，而不是其中的图像元素：

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

我已更改div.left > .img > img为div.left. 此处显示了此行为的稍微干净的版本。

于 2013-04-22T09:17:50.000 回答