用於懸停的jQuery動畫

Question

我試圖在將鼠標懸停在錨元素上時爲其設置動畫效果。當我將鼠標懸停在標誌上時，第一個圖像完成後，圖像需要向上和向下。當鼠標離開它時，當前元素（第2個）應該向上，當它離開時，第一個元素應該向下。

我知道如何爲此設置動畫，但是當我將鼠標懸停在我的錨點元素上方時，我遇到了麻煩。有時兩張圖片（第一張&第二張出現）等。

這是我已經得到的，我該如何正確地做到這一點？

function logoAnimation() { 
var logo = jQuery('#logo a'); 
var house = jQuery('#logo_icon_house'); 
var brush = jQuery('#logo_icon_brush'); 

var inHandler = function() { 
    logo.unbind('mouseleave', outHandler); 
    brush.animate({ 
     "top": "-27px" 
    }, 250, function(){ 
     house.animate({ 
      "top": "42px" 
     }, 250,function(){ 
      logo.bind('mouseleave', outHandler); 
     }); 
    } 
    ); 
} 
var outHandler = function() { 
    logo.unbind('mouseenter', inHandler); 
    house.animate({ 
     "top": "-21px" 
    }, 250, function() { 
     brush.animate({ 
      "top": "39px" 
     }, 250,function(){ 
      logo.bind('mouseenter', inHandler); 
     }); 
    }); 
} 

logo.mouseenter(inHandler).mouseleave(outHandler); 
} 

正確回答我的問題後，我好不容易用下面的代碼來工作了這一點：

function logoAnimation() { 
var logo = jQuery('#logo a'); 
var house = jQuery('#logo_icon_house'); 
var brush = jQuery('#logo_icon_brush'); 

var inHandler = function() { 
    if(brush.is(':animated')) { 
     return; 
    } 
    brush.stop(true,true).animate({ 
     "top": "-27px" 
    }, 250, function(){ 
     if(house.is(':animated')) { 
      return; 
     } 
     house.animate({ 
      "top": "42px" 
     }, 250); 
    } 
    ); 
} 
var outHandler = function() { 
    house.stop(true,true).animate({ 
     "top": "-21px" 
    }, 250, function() { 
     if(brush.is(':animated')) { 
      return; 
     } 
     brush.animate({ 
      "top": "39px" 
     }, 250); 
    }); 
} 

logo.mouseenter(inHandler).mouseleave(outHandler); 
} 

Answer 1

要麼你應該叫.stop(true, true)調用.animate()（環內）之前，或者你可以創建一些類似的語句。

brush.stop(true, true).animate({}); // ... 

這可以確保所有動畫都將停止對brush開始一個新的人之前。 .stop()的參數是「CleartQueue」和「JumpToEnd」。

if(!brush.is(':animated')) {} 

確保只有在目前沒有動畫正在進行時纔會調用.animate()。

參考：.stop()，:animated