3

ブラウザをクラッシュさせない無限ループを作成できるかどうか疑問に思っていました。画面をスクロールするときにパルスが発生するギャラリータイプのものに取り組んでいます。

これは私がこれまでに持っているものです（これは明らかにブラウザをクラッシュさせます）：

    var i = 0;
    while (i < 1){
        $('.block').each(function(index) {  
            $(this).css('left', $(this).position().left - 10)
            if (($(this).position().left) < ($(window).width() * 0.4)) {
              $(this).html('<p>Test 1</p>');
              $(this).animate({
              width: "500px",
              height: "500px",
              }, 500 );
            }else if (($(this).position().left) < ($(window).width() * 0.2)) {
              $(this).html('<p>Test 1</p>');
              $(this).animate({
              width: "600px",
              height: "600px",
              }, 500 );
            }
        });
    }

どんなヒントも素晴らしいでしょう！

4

3 に答える 3

10

次のコードのようにwindow.setInterval（）を使用してみてください（間隔3秒で実行されます）：

function LoopForever() {
    $('.block').each(function(index) {  
       $(this).css('left', $(this).position().left - 10)
       if (($(this).position().left) < ($(window).width() * 0.4)) {
           $(this).html('<p>Test 1</p>');
           $(this).animate({
              width: "500px",
          height: "500px",
           }, 500 );
       }else if (($(this).position().left) < ($(window).width() * 0.2)) {
           $(this).html('<p>Test 1</p>');
           $(this).animate({
          width: "600px",
          height: "600px",
           }, 500 );
       }
    });
}

var interval = self.setInterval(function(){LoopForever()},3000);

//call code bllow to stop interval
//window.clearInterval(interval);

注：1000=1秒。

于 2012-10-22T22:20:48.507 に答える
2

パフォーマンスを向上させるには、setIntervalの代わりにrequestAnimationFrameを使用します。

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

于 2016-06-03T21:28:20.040 に答える
0

jQueryアニメーションは連鎖できるため、あるアニメーションを実行してから別のアニメーションを実行するには、animateを2回呼び出すことができます。.queue（callback（next））を使用して、アニメーション以外のアニメーションをキューに追加することもできます。

jsFiddleデモ

<div class="hello">Hi</div>​

.hello {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
}​

$(".hello")
    .animate({ left: 200 })
    .animate({ width: 200, height: 200 })​

ボーナスのヒント：無限ループが必要な場合は、trueをwhileに渡してください：while (true) { ... }。

于 2012-10-22T22:21:08.927 に答える