淡入淡出與動畫的立場 - 更好的方式來寫這個？

有沒有更好的方法來編寫以下內容？淡入淡出與動畫的立場 - 更好的方式來寫這個？

$(function(){  
    $('.start-here-notice').fadeIn(1000).animate({"left":"-155px"}, "slow") 
    $('.start-here-notice').animate({"left":"-165px"}, "slow").delay(5000).fadeOut(1000);   
});

它工作正常，但我認爲可能有更有效的方式來寫這個。如果是這樣，我可能會多動畫幾次。

仍然在這裏學習和任何幫助，將不勝感激。

謝謝！

來源

2011-10-17 Bingles

你可以設置一個js小提琴，讓我們知道動畫是做什麼的嗎？ – Ryre

jQuery是高效的，但從不好。 – joakimdahlstrom

你可以叫儘可能多的jQuery方法，只要你喜歡的對象上，通過鏈接它們：

$(function(){  
    $('.start-here-notice') 
     .fadeIn(1000) 
     .animate({"left":"-155px"}, "slow") 
     .animate({"left":"-165px"}, "slow") 
     .delay(5000) 
     .fadeOut(1000);   
});

訪問由ID的元素比按類訪問它稍快。（在這種情況下，差異是微不足道的，因爲你只做一次。）
如果你要再次使用相同的元素，可以將$('.start-here-notice')的結果存儲在變量中，所以你只需要查看一次。（同樣，在這種情況下，性能增益也是微不足道的，當你多次使用它們，比如處理大量元素，或者頻繁地使用它們時，你會開始看到存儲jQuery對象的好處，）

來源

2011-10-18 00:17:30 s4y

這

$(function(){  
    $('.start-here-notice').fadeIn(1000).animate({"left":"-155px"}, "slow", function(){ 
     $(this).animate({"left":"-165px"}, "slow").delay(5000).fadeOut(1000); 
    }); 
});

...想到。再一次，這可能沒有關係。

來源

2011-10-17 22:22:47 vzwick

立即跳出我的唯一的事情是設置您的jQuery查找變量。

var startHereNotice = $('.start-here-notice'); 
startHereNotice.fadeIn(1000)...

來源

2011-10-17 22:22:56 Ryre

你可以在同一個電話不透明度的動畫以動畫

$('.start-here-notice').animate({"left":"-155px", "opacity":1}, "slow") 
$('.start-here-notice').animate({"left":"-155px", "opacity":0}, "slow")

，但照顧，不透明度不完全支載於IE6和IE7。使用alfa濾鏡代替

編輯：好的，第二次調用，如果你想延遲淡出，你的實現是好的。 delay（）是要走的路。

來源

2011-10-17 22:23:47

使用find函數在jQuery中定義基於類的元素是最有效的，並且還包括html元素類型。

您目前有：

$('.start-here-notice')

您應該考慮做這樣的事情（假設。開始，這裏通知書是DIV）

$('#parent').find('div.start-here-notice')

需要明確的是，如果你有一個最小的在頁面上使用適量的DOM元素和有限的JavaScript，幾乎肯定不會注意到速度的增加。這只是最有效的方法。

來源

2011-10-17 22:52:28

'$（'＃parent .start-here-notice'）'是否等價？如果是這樣，性能優勢是由於從ID降序，而不是使用'.find（）'。 – s4y

它通常更快（在CSS中），以使*標籤名稱不再出現。然後，jQuery（或瀏覽器）不必過濾結果，只包含'div's。 – s4y

你對標籤名稱的遺漏是正確的，我錯了。但是，使用$（ID CLASS）方法在技術上比使用$（ID）.find（CLASS）方法慢，因爲jQuery將第一個轉換爲後者。它從根本上消除了一個函數調用。 –

淡入淡出與動畫的立場 - 更好的方式來寫這個？

回答

相關問題