Question

您好我正在使用Jquery Flip插件 - http://lab.smashup.it/flip/

我有这个代码在悬停时执行翻转。当mouseenter时，'.container'位于背面。当mouseleave''.container'在正面时。

当鼠标中心在鼠标中心翻转动画完成之前'.container'时，'.container'不会在正面翻转。发生这种情况时，我需要停止翻转。我怎么做到这一点？我会用'stop（true，false）'或者写一个'if（$（this）.is（“：animated”））{} ......'或'var hovering = 0; $（ “容器”）。悬停（函数（） {hovering = 1; }，function（）{hovering = 0;}）; ..等''

请帮忙。感谢。

$('.container').bind("mouseenter", function() {
    var elem = $(this);
    if (elem.data('flipped')) {} else {
        elem.flip({
            direction: 'lr',
            speed: 500,
            onBefore: function() {
                elem.html(elem.siblings('.content').html());
            },
            onAnimation: function() {
                elem.data('flipped', true);
            },
            onEnd: function() {}
        });
    }
});
$('.container').bind("mouseleave", function() {
    var elem = $(this);
    if (elem.data('flipped')) {
        elem.flip({
            direction: 'rl',
            speed: 500,
            onBefore: function() {
                elem.html(elem.siblings('.initContent ').html());
            },
            onAnimation: function() {
                elem.data('flipped', false);
            },
            onEnd: function() {}
        });
    }
});

Answer 1

大家都没关系，我提出了一个稍微不同的解决方案，即隐藏其他没有悬停的div。感谢那些阅读我的问题的人。

  $(".container").each(function(i){
        $(".container").not($(this)).mouseenter(function() {
        $(".container").eq(i).trigger("mouseleave",[true]);
        });
  });

mouseleave时停止mouseenter动画

1 个答案: