試圖用jQuery實現不透明度動畫fadeIn/fadeOut

Question

我有用CSS製作的這個小提琴。

http://jsfiddle.net/Q5cRU/

我試圖實現確切動畫使用jQuery fadeIn/fadeOut。 （沒有不透明度和動畫效果）

stop() and finish()與fadeIn/fadeOut一起使用的函數不起作用，因爲如果我快速移動光標，他們只需隱藏或顯示框。

謝謝。

Answer 1

您必須在您的jQuery動畫中使用stop()來模擬CSS動畫。

它具有以下參數，.stop([clearQueue ] [, jumpToEnd ])，和你想要的是清除隊列中，而不是直接到終點，所以這將是stop(true, false)

$('.box1').on('mouseenter mouseleave', function(e) { 
    $('.box2').stop(true, false).animate({opacity: e.type=='mouseenter'? 1 : 0}, 1500) 
}); 

FIDDLE

或不透明度

$('.box1').on('mouseenter mouseleave', function() { 
    $('.box2').stop(true, false).fadeToggle(1500) 
}); 

FIDDLE

Answer 2

這裏你去。

http://jsfiddle.net/defmetalhead/Q5cRU/2/

$(".box1").on({ 
     mouseover: function() { 
      $('.box2').stop().fadeIn('slow'); 
     }, 
     mouseleave: function() { 
      $('.box2').stop().fadeOut('slow'); 
     } 
    });