1

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

我有这段代码在悬停时执行翻转。当鼠标进入时，'.container' 位于背面。当鼠标离开时，“.container”在前面。

当鼠标在 mouseenter 翻转动画完成之前离开“.container”时，“.container”不会从正面翻转回来。发生这种情况时，我需要停止翻转。我将如何实现这一目标？我会在某个时间使用'stop(true, false)' 还是写一个'if ($(this).is(":animated")) {}...' 或'var hovering = 0; $(".container").hover(function() {hovering = 1; },function() { hovering = 0;});..etc'

请帮忙。谢谢。

$('.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() {}
        });
    }
});​
4

1 回答 1

1

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

  $(".container").each(function(i){
        $(".container").not($(this)).mouseenter(function() {
        $(".container").eq(i).trigger("mouseleave",[true]);
        });
  });
于 2012-10-09T10:09:21.860 回答