0

我正在使用本教程创建翻转墙：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/

4

1 回答 1

1

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

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

elem.stop().flip({

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

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

于 2013-07-25T22:00:40.627 回答