如何添加動畫到這個jQuery？

我想爲這個jquery添加一些動畫，此刻div在彈出時彈出。如何添加動畫到這個jQuery？

$(document).ready(function() { 

$('.recruiterLink').hover(function() { 

    $(this).css({ 
     'bottom' : 0 
    }); 

}, function() { 

    $(this).css({ 
     'bottom' : -20 
    }); 

}); 

});

我該怎麼做呢？由於

來源

2010-11-22 Anthony

您正在尋找這樣的事情（應該工作開箱即用）？

$('.recruiterLink').hover(function() { 
    $(this).stop().animate({ 
     'bottom': '0px' 
    }, 500); 
}, function() { 
    $(this).stop().animate({ 
     'bottom': '-20px' 
    }, 500); 
});

這將使bottom CSS屬性動畫500毫秒。它還會中止所有正在運行的動畫以防止尷尬行爲（由排隊引起）。

來源

2010-11-22 11:57:16 jwueller

這是安東尼的最佳解決方案，我寫的完全一樣，+1。 – 2010-11-22 12:04:58

優秀的整潔答案謝謝！ – Anthony 2010-11-22 12:17:45

只是改變.css到.animate

像下面將工作：

$('.recruiterLink').hover(function() { 
    $(this).animate({bottom : 0},1000); 
}, function() { 
    $(this).stop(false,false).animate({bottom: -20},1000); 
});

我已在懸停停止功能關閉，因此，如果以前的動畫還沒有結束那它馬上結束。

來源

2010-11-22 11:56:47

+1，因爲你在我的腦海裏讀取=） – 2010-11-22 11:57:32

A 0毫秒的動畫不是很有用，是嗎？ – jwueller 2010-11-22 11:59:31

抱歉沒有寫完。 – 2010-11-22 12:01:03

只是改變.css()與.animate()

來源

2010-11-22 11:56:52

需要指定速度。不是解釋。 – 2010-11-22 12:06:19

這是對我的問題最簡單的解決方案，但添加.stop（）也是一個好主意。 – Anthony 2010-11-22 12:14:47

@toro：不需要指定持續時間，因爲400ms是默認速度，所以不是強制屬性。這個建議無論如何都是有效的。 ;） – 2010-11-22 12:18:52

更換.css()功能

用，例如

.stop().animate({ bottom:'-=20px' },"slow")

jQuery的動畫（）API參考：

來源

2010-11-22 12:00:04 BFil

如何添加動畫到這個jQuery？

回答

相關問題