jqueryで関数を自分自身で繰り返す方法を教えてください。

Question

はのは、例えば、私はdivのfadeOut & fadeInを作り、それ自体が10秒ごとに繰り返す機能を作りたいとしましょう。 jQueryで。これは私の現在のコードです。

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

Answer 1

あなたはjQueryを使ってあなたのアプローチを使用したい場合は、あなただけのfadeToggleの代わりfadeOutを使用することができます。

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

これにより、〜10秒ごとにフェード効果が適切に切り替わるようにします。

アン間違いなくより良いアプローチはRory McCrossanによって示されるように、特に代わりにアニメーションのためのjQueryを使用するのでは、CSSを使用することです。

理由は、ブラウザのレンダリングエンジンは、通常、アニメーション時々JavaScriptを使用して事前に最適化することができないのに対し、より効率的に（それは事前に物事を最適化することができます）CSSを使用してアニメーションを行うことができるということです。 CSSを使ってアニメーションロジックを書く方が、JSを使用して高さや不透明度を時間の経過とともにさまざまな計算を手動で実行するのに比べて、より簡単で表現力豊かです。

さて、このアニメーションのためのjQueryを使用すると、実際にも、より表現CSSよりも（コードのその1行以降）が、パフォーマンスはCSSを使用して重要である場合は間違いなくjQueryのを打ちます。

その注意することが重要しかしそれだけでなく、最適化されたJavaScript（jQueryのではない）は、しばしば同じくらい速いかのCSSアニメーションよりも高速ではありません。

ここgood article comparing animation using CSS vs JS and jQuery

Answer 2

この場合、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>