2

私はループする必要があるこれらのスクリプトを持っています：

$(document).ready(function() {
    runIt();
})
function resets()
{
  $('.grower').removeAttr("style");
}

function runIt() 
    {
        $('.grower').animate({width: "30px",height: '30px', left: "-6", top: "-6", opacity:"0"}, 800, resets);
    }

しかし、runIt（）;を追加すると ループできるように自己内部にあり、ループしますが、ブラウザが空白になり、応答しません。そのアニメーションをループするようにするにはどうすればよいですか。

前もって感謝します

4

2 に答える 2

9

DOMを常に照会する必要はありません。$('.grower')を変数に格納します。

$(document).ready(function() {
    var $grower = $('.grower');

    function runIt() {
        $grower.animate({
            width: "30px",
            height: '30px',
            left: "-6",
            top: "-6",
            opacity:"0"
        }, 800, function() {
            $grower.removeAttr("style");
            runIt();
        });
    }

    runIt();
});

これがフィドルです：http：//jsfiddle.net/jC8Js/

更新：各サイクルの前に一時停止する場合は、タイマーを使用します。

setTimeout(runIt, 1000);

これがフィドルです：http：//jsfiddle.net/jC8Js/1/

または、インターバルタイマーを使用してすべてを実行することもできます。

$(document).ready(function() {
    var $grower = $('.grower');

    setInterval(function() {
        $grower.animate({
            width: "30px",
            height: '30px',
            left: "-6",
            top: "-6",
            opacity:"0"
        }, 800, function() {
            $grower.removeAttr("style");
        });
    }, 1500);
});​

これがフィドルです：http：//jsfiddle.net/jC8Js/2/

于 2012-08-01T17:15:46.517 に答える
1

http://jsfiddle.net/nUVbb/

 $(document).ready(function() {
    runIt();
})
function resets()
{
    $('.grower').removeAttr("style");
    runIt();
}
function runIt() 
{
    $('.grower').animate({width: "30px",height: '30px', left: "-6", top: "-6", opacity:"0"}, 800, resets);
}
于 2012-08-01T17:11:03.557 に答える