0

私は単純なフェードイン フェードアウト アニメーションを持っています。これは基本的に点滅する矢印です。ただし、ループしません。1回行くだけで完了です。私はここで答えを見つけました -> How to repeat (loop) Jquery フェードイン - フェードアウト - フェードイン、それでも私がそれに従おうとすると、私のものは機能しません。

アニメの脚本は

<script type="text/javascript">
$(document).ready(function() {
    $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
   $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
});
</script>

答えで与えられたスクリプトは

$(function () {
    setInterval(function () {
        $('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }, 5000);
});

したがって、最終的な組み合わせは次のようになると思います

 $(document).ready(function() {
   setInterval(function () {
        $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
    }, 5000);
});
    </script>

誰かが私が間違っていることを指摘してもらえますか? ありがとう

4

4 に答える 4

4

2 つの詳細:

  • 10000アニメーションが10秒実行されるため、間隔を設定する必要があります

  • 今すぐ開始したい場合は、間隔を実行する前に一度呼び出す必要があります (間隔の最初の実行は遅延の後です)。

--

$(document).ready(function() {

   function animate() {
       $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
   }

   animate();
   setInterval(animate, 10000);
});​

ここでのデモ: http://jsfiddle.net/bjhG7/1/

--

setInterval の代わりに callback を使用する代替コード (コメントを参照):

$(document).ready(function() {

   function animate() {
       $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000, animate);
   }

   animate();
});​

ここでのデモ: http://jsfiddle.net/bjhG7/3/

于 2012-04-14T06:55:35.470 に答える
1 
function fadein(){
    $('#picOne,#picTwo').animate({'opacity':'1'},1000,fadeout())
}
function fadeout(){
    $('#picOne,#picTwo').animate({'opacity':'0'},1000,fadein())
}
fadein()
于 2012-04-14T06:44:42.947 に答える
1

のコールバック引数を利用します.fadeOut()。フェードを行う関数への参照をコールバック パラメータとして渡します。カウンターに基づいてフェードする画像を選択します。

$(function() {
    var imgs = $('#picOne,#picTwo');
    var fadeCounter = 0;

    (function fadeImg() {
        imgs.eq(fadeCounter++ % 2).fadeIn(1000).delay(3000).fadeOut(1000, fadeImg);
    })();
});

デモ: http://jsfiddle.net/KFe5h/1

于 2012-04-14T06:58:56.357 に答える
0

アニメーション シーケンスが複雑になるにつれて、async.jsを使用するとコードが読みやすく保守しやすくなることがわかりました。async.series 呼び出しを使用します。

于 2012-04-14T12:00:22.247 に答える