4

2つの異なる関数をまったく同時に実行しようとしています。

画像が一列に並んでいて、不透明度を変えて次々と光り、まばたきのように見せています。問題は、タイミングが正確である必要があり、数ミリ秒の差があると、1〜2分後には混乱のように見えることです。

    <img src="img1" class="1" /><img src="img2" class="2" /><img src="img3" class="3" />

    <script type="javascript">
    setTimeout(function blinkone(){$('.1').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkone);},1000)

    setTimeout(function blinktwo() {$('.2').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinktwo);},2000)

    setTimeout(function blinkthree() {$('.3').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkthree);},3000)
    </script>

複数の機能を同時に実行するにはどうすればよいですか？

4

3 に答える 3

4

Javascriptはシングルスレッドであるため、文字通り、正確に同時に多くの関数を実行することはできません。setTimeout呼び出しをグループ化することで、これを回避できます。例：

var iterationCount = 0;
setTimeout(function(){
   iterationCount++;
   $('.1').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkone);
   if (iterationCount % 2 == 0) {
      $('.2').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinktwo);
   }
   if (iterationCount % 3 == 0) {
      $('.3').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkthree);
   }
},1000);

このようにして、アニメーション間の同期が失われるのを防ぎます。

于 2012-11-25T22:20:14.940 に答える
2

それらすべてに同じクラスを与えて、そのクラスに影響を与えるだけです。http://jsfiddle.net/popnoodles/amD8T/2/

<img src="img1" class="blink" />
<img src="img2" class="blink" />
<img src="img3" class="blink" />

<script>
$(function(){

    offon();

});

function offon()
{
    $('.blink').animate({opacity:0},1000)
        .animate({opacity:1},1000, function(){
            offon();
        });
}
</script>
于 2012-11-25T22:23:09.140 に答える
0

コールバックを再帰的にチェーンすることもできます。これは、はるかにクリーンなIMOです。

function display(number){
    number = number || 1
    $('.'+ (number % 3 + 1)).delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, function(){display(++number);});
}

これも適切にスケーリングされるため、100枚の画像に効果を追加するために100行のコードを追加する必要はありません。

これがデモンストレーションです：http：//jsfiddle.net/8cwA6/1/

完全にはわかりませんが、おそらくあなたが望む効果はこのフィドルのようなものです：http: //jsfiddle.net/8cwA6/2/

于 2012-11-25T22:26:20.000 に答える