2

jquery の回転関数で遅延関数が機能しません。理由はわかりません。

基本的に、私のコードは div をある角度で回転させ、特定の角度で停止します。これは現時点で機能します。ただし、3〜4秒後に動作するように遅延を追加しました。

しかし、それをしていません。

$(window).load(function() {
    var $elie = $("#super");
    rotate(1);

    function rotate(degree) {
        $elie.css({
            '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            '-ms-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)'
        });
        console.log(degree);
        if (degree < 55) {
            timer = setTimeout(function() {
                rotate(++degree)
            }, 10)
            delay: 4000;
        }
    }
});​
4

3 に答える 3

3

ローテーションを遅らせたい場合は、遅延関数の周りに「setTimeout」を作成します。

$(window).load(function() {
    var $elie = $("#super");
    setTimeout(function() {
        rotate(1);
    }, 4000)

    function rotate(degree) {
        $elie.css({
            '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            '-ms-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)'
        });
        console.log(degree);
        if (degree < 55) {
            timer = setTimeout(function() {
                rotate(++degree)
            }, 10)
        }
    };
});​

（また、言及したように、必要な効果がないdalay：4000を削除しました！）

フィドラーの例: http://jsfiddle.net/49VEe/

編集2:

HTML5transitionを使用して、再帰関数の代わりに回転効果を得ることができます (遅滞なくサンプル:

$(window).load(function() {
    var $elie = $("#super");
        rotate(55);

    function rotate(degree) {
        $elie.css({
            '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            '-ms-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)',
            '-webkit-transition': 'all 1s ease-in-out',
            '-moz-transition': 'all 1s ease-in-out',
            '-o-transition': 'all 1s ease-in-out',
            transition: 'all 1s ease-in-out'
        });
    };
});​

フィドラー: http://jsfiddle.net/mZzjP/

于 2012-11-29T13:20:32.310 に答える
2

数秒後にローテーションを開始する場合は、次rotate(1);のsetTimeoutようにイニシャルをラップします。

setTimeout(function() { rotate(1); }, 3000); // 3 seconds

delay: 4000;エラーが発生するだけなので、削除する必要もあります。

于 2012-11-29T13:16:07.717 に答える
2

試す

if (degree < 55) {
    timer = setTimeout(function () {
        rotate(++degree)
    }, 10);
    delay: 4000; // remove this
}

の中へ

if (degree < 55) { 
    timer = setTimeout(function () { rotate(++degree) }, 10);
}

次のような初期 setTimout も必要です

setTimeout( rotate(1), 4000 );

ここでフィドル

于 2012-11-29T13:16:17.540 に答える