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/

jquery mouseover没有保持选中状态

1 个答案: