jQueryのクロスフェード画像無限に無限

Question

このコードを交互に2枚の画像、及びそれが動作します：

<img src="../images/opisSlike/nagrada2a.jpg" class = "nag2altImg" alt=""/> 
<img src="../images/opisSlike/nagrada2b.jpg" class = "nag2altImg2" alt=""/> 
//second image starts with opacity 0 

<script type="text/javascript"> 

function myAnimate(){ 

    $('img.nag2altImg').delay(2500).animate({"opacity": "0"}, 1500); 
    $('img.nag2altImg').delay(2500).animate({"opacity": "1"}, 1500);   

    $('img.nag2altImg2').delay(2500).animate({"opacity": "1"}, 1500); 
    $('img.nag2altImg2').delay(2500).animate({"opacity": "0"}, 1500);  

    // this animation lasts for 8 seconds: 2500 delay + 1500 animation + 2500 delay + 1500 animation 
} 

$(document).ready(myAnimate()); 
$(document).ready(setInterval(function() {myAnimate()}, 8000)); 

</script> 

しかし、私は思っていたので、そのようなものを作るために、と言って、よりエレガントな方法はありますか？

Answer 1

タイマーを使用してください。それをグローバルにする。すべてのアニメーションを1つのタイマーに基づいて作成します。アニメーションを手作業でコーディングし、jQueryを遅くしておくと、複数のアニメーションを同時に実行することに問題があります。すべてのものをカスタムライブラリにラップします。フロントエンドから電話をかけてください。

Answer 2

function myAnimate(){ 

     $('img.nag2altImg').delay(2500).animate({"opacity": "0"}, 1500); 
     $('img.nag2altImg').delay(2500).animate({"opacity": "1"}, 1500);   

     $('img.nag2altImg2').delay(2500).animate({"opacity": "1"}, 1500); 
     $('img.nag2altImg2').delay(2500).animate({"opacity": "0"}, 1500);   

     // this animation lasts for 8 seconds: 2500 delay + 1500 animation + 2500 delay + 1500 animation 
     // run forever. 
     myAnimate(); 
    } 

$(document).ready(myAnimate()); 

これは、よりよい解決策のようになります。

function myAnimate() { 
    $('img.nag2altImg2').animate({ 
     opacity: 1.0 
    }, { 
     duration: 1500 
    }).animate({ 
     opacity: 0 
    }, { 
     duration: 1500 
    }).animate({ 
     opacity: 1.0 
    }, { 
     duration: 1500, 
     complete: myAnimate 
    }) 
} 
$(document).ready(myAnimate());