jquery mouseover 没有保持选中状态

Question

我正在使用本教程创建翻转墙：http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

在教程中，翻转元素由 .click 事件触发，我想将其更改为 .mouseover 事件。

我在这里使用 .mouseover 事件设置了一个演示。但是，当您将鼠标悬停在图像上并稍微移动鼠标时，图像会向后翻转。

这是我的 js：

编辑：更新代码

$(document).ready(function(){
var valid = false;
$('.sponsorFlip').bind("mouseenter",function(){
    elem = $(this);
    if(!valid){ 
        // Using the flip method defined by the plugin:

        elem.flip({
            direction:'lr',
            speed: 250,
            onBefore: function(){
                // Insert the contents of the .sponsorData div (hidden from view with display:none)
                // into the clicked .sponsorFlip div before the flipping animation starts:

                elem.html(elem.siblings('.sponsorData').html());
            }
        });

        // Setting the flag:
        elem.data('flipped',true);
        valid = true;
    }
});

$('.sponsorFlip').bind("mouseleave",function(){
    elem = $(this);

    elem.revertFlip();
    valid = false;
});

}); 

有没有人知道如何在您稍微移动鼠标时防止翻转？我希望元素保持翻转状态，直到鼠标离开该元素。

小提琴已添加http://jsfiddle.net/csdQB/2/

Answer 1

我认为当您快速悬停时元素再次翻转时出现问题的原因是悬停事件在当前事件有时间完成之前被触发。

我建议在这里使用stop jQuery 方法：

elem.stop().flip({

不幸的是，这只是解决方案的一半，因为您会遇到动画过早中断的问题。抱歉，我不确定如何防止这种情况。希望这将帮助您找到更持久的解决方案。

您可能会发现这篇文章对您有所帮助：http://css-tricks.com/full-jquery-animations/