javascript - Mouseenter 和 Mouseleave 给出了不希望的结果

Question

我正在尝试集成一个插件，简直是一场噩梦。

我试图让我的页面上的 X 元素在悬停时翻转，然后在鼠标移出时恢复原状。

我正在使用翻转功能，如果我将鼠标悬停在一个元素上，等待几秒钟让翻转完成动画，然后移动我的光标，它就可以正常工作。但是，如果我快速悬停，我的翻转会发生但会完全搞砸，并且您无法在多个元素上快速移动鼠标。

我试过使用 stop() 无济于事，所以我想在这里问一下，我附上了一个 fiddle ，在查看我的 fiddle 时，快速将鼠标移过所有元素你会明白我的意思的

http://jsfiddle.net/5JyVC/

$('.sec-con').prepend('<div class="target" style="width:100%; height:100%; z-index:999999; cursor:pointer;top:0; left:0; display:block; position:absolute; "></div>');
$('body').on({
    mouseenter: 
    function () {
        $(this).stop(true, true).next('.sector').flip({
            direction:'rl',
            color:'#2d6995',
            speed: 200,
            content:'<span class="all-vacancies">View all Vacancies <br />in this sector.</span><span class="read-more">Click here to read more.</span>'
        });
    },
    mouseleave: function () {
        $(this).next('.sector').revertFlip();
    }
}, '.target');

Answer 1

这与 flipLock 数据属性有关。如果你 mouseout 太快，flipLock 为 true 并且不会发生恢复翻转，导致下一次鼠标悬停以错误的内容开始。因此，从那时起，您将在相同内容之间来回切换。

如果您删除 flipLock 检测并返回 false 并将 stop 添加到 animation 中调用 flip 它将正确恢复。

虽然动画看起来有点不稳定，但我不确定该怎么做。

这对我有用:http://jsfiddle.net/5JyVC/5/如果你移动得足够快，它仍然会搞砸，不知道为什么会这样，也许是多个鼠标悬停事件？我猜这就是最初的 flipLock 想要阻止的。

也许 flipLock 应该更复杂，当翻转时，只允许向后翻转，反之亦然。 flip 和 revertFlip 的当前实现不允许这样做。