如何使一個函數在jquery中重複自己？

比方說，我想要做一個功能，使一個分區fadeOut & fadeIn並每隔10秒重複一次。在jQuery中。這是我現在的代碼。如何使一個函數在jquery中重複自己？

window.setInterval(function(){ 
    $("leftEye").fadeOut("slow"); 
}, 5000);

來源

2016-11-02 Sharky66

CSS動畫似乎鐵道部在這種情況下 –

適當請具體談談您的實際問題。 – Steve

如果您想使用與jQuery你的方法，你可以用fadeToggle代替fadeOut。

// toggle the fade effect for #leftEye every 10 seconds 
window.setInterval(function(){ 
    $("leftEye").fadeToggle("slow"); 
}, 10000); // 10000 milliseconds

這將確保適當地切換淡入淡出效果每10秒。

可以說更好的方法是使用CSS，如Rory McCrossan所示，尤其是不使用jQuery進行動畫。

原因是瀏覽器的渲染引擎通常可以使用CSS更高效地執行動畫（它可以提前優化），而使用JavaScript進行動畫有時不能提前優化。與使用JS手動執行各種計算相比，使用CSS編寫動畫邏輯更容易和更具表現力，例如隨着時間的推移轉換高度或不透明度。

現在，使用jQuery這個動畫實際上比CSS更具表現力（因爲它的第一行代碼），但如果性能很重要，那麼使用CSS肯定會擊敗jQuery。

然而，重要的是要注意，優化好的JavaScript（不是jQuery）如果不比CSS動畫快，速度往往是一樣快。

這裏有一個good article comparing animation using CSS vs JS and jQuery

來源

2016-11-02 18:02:13 nem035

在這種情況下，CSS動畫看起來更合適 - 尤其是因爲硬件加速。您可以創建關鍵幀，然後將它們設置爲在5秒的時間段內進行動畫製作，並無限重複。

@keyframes fade { 
 
    0% { opacity: 1; } 
 
    50% { opacity: 0; } 
 
    100% { opacity: 1; } 
 
} 
 
.inifinte-fader { 
 
    opacity: 1; 
 
    animation: fade 5s infinite; 
 
}

<div class="inifinte-fader">Foo bar fizz buzz</div>

來源

2016-11-02 18:02:07

如何使一個函數在jquery中重複自己？

回答

相關問題