0

このコードは 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>

しかし、私は、もっとエレガントな方法で、そのようなものを作ることができるのではないかと思っていました.

4

2 に答える 2

1 
    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());
于 2012-05-03T00:06:51.707 に答える
0

タイマーを1 つ使用します。グローバルにします。1 つのタイマーに基づいてすべてのアニメーションを作成します。jQuery は遅く、複数のアニメーションを同時に実行すると問題が発生するため、アニメーションを手作業でコーディングし、jQuery はそのままにしておきます。全体をカスタム ライブラリにラップします。フロントエンドから 1 つの呼び出しを行います。

于 2012-05-03T00:05:41.677 に答える