2012-10-08 80 views
1

嗨,我使用jQuery插件翻轉 - http://lab.smashup.it/flip/停止了mouseenter動畫當鼠標離開

我有這樣的代碼執行懸停翻轉。當鼠標輸入時,'.container'在背面。當mouseleave'.container'在正面時。

當鼠標在鼠標中彈出'.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() {} 
     }); 
    } 
});​ 
+0

在jsFiddle上放置一個演示。 – glortho

+0

http://jsfiddle.net/sandy2012/T9AA5/29/ – kayee

回答

1

大家好,我從來沒有想過一個稍微不同的解決方案,它隱藏了其他未被徘徊的div。感謝那些閱讀我的問題的人。

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