1

私はこの車を休憩でツアーにしています。私はこれが欲しいです：

1）ページの右側に移動する必要があります

2) 左 750 の位置に達したら、停止する必要があります。

3) 5 秒間停止する

4) 一時停止後、ページの左側に配置する必要があります。

5) 運転を再開します。

http://jsfiddle.net/mjTgB/6/

$(document).ready(function () {
    var showcar;
    showcar = setInterval(function () {
        var difference = $(".car").position().left
        if (difference < 750)
        {
            $('.car').css("left", "+=2px");
        }
        else
        {
            clearInterval(showcar);
            setTimeout(function()
            {
                $('.car').css("left", "-=700px");
                //want to re-start the interval
            },5000);
        }
    }, 10);
});
4

6 に答える 6

3 
var showcar;
STARTZOOM();
function STARTZOOM() {
    showcar = setInterval(CARZOOM, 10);
}
function CARZOOM() {
    var difference = $(".car").position().left
    if (difference < 750) {
        $('.car').css("left", "+=2px");
    } else {
        clearInterval(showcar);
        setTimeout(function () {
            $('.car').css("left", "-=700px");
            STARTZOOM();
        }, 5000);
    }
}

チャットで述べたように、最初に呼び出したのと同じ方法で間隔を再開する必要がありますが、anon 関数の代わりに名前付き関数を使用します。コードの重複を減らすために、「再起動」を独自の関数に入れました。注: 私の関数名は意図的に悪いものです。

于 2013-09-18T14:42:12.680 に答える
1

ハンドラーを間隔から分離して、再利用できるようにする必要があります。

デモ: http://jsfiddle.net/mjTgB/10/

var showcar, interval;

showcar = function () {
    var difference = $(".car").position().left;

    if (difference < 750) {
        $('.car').css("left", "+=2px");
    } else {
        clearInterval(interval); // Clear the interval

        setTimeout(function () {
            $('.car').css("left", "-=700px");
            interval = setInterval(showcar, 10); // Re-assign the interval
        }, 5000);
    }
};

interval = setInterval(showcar, 10); // Initialize
于 2013-09-18T14:53:54.740 に答える
1

簡単な解決策の 1 つは、既存の 関数を変数にドロップして.ready()、実行の最後に再実行することです。

そのようです：

$(document).ready(function() {
  var run = function () {
    var showcar;
    showcar = setInterval(function () {
        var difference = $(".car").position().left
        if (difference < 750)
        {
            $('.car').css("left", "+=2px");
        }
        else
        {
            clearInterval(showcar);
            setTimeout(function()
            {
                $('.car').css("left", "-=700px");
                run();
            },5000);
        }
    }, 10);
  }
  run();
});

http://jsfiddle.net/WGJ9g/1/

于 2013-09-18T14:47:04.130 に答える
0

実際、車を元の位置に戻し続けて右に移動させたい場合は、その必要はありません。このようclearInterval()に左に設定するだけです。0px

$(document).ready(function () {
    var showcar;
    showcar = setInterval(function () {
        var difference = $(".car").position().left
        if (difference < 750)
        {
            $('.car').css("left", "+=2px");
        }
        else
        {
            //clearInterval(showcar);
            $('.car').css("left", "0px");
        }
    }, 10);
});

デモ;)

于 2013-09-18T14:31:57.830 に答える
0

私が理解しているように、あなたは車がスタートに向かって素早く戻り、右に走るアニメーションをループし続けることを望んでいます。

このjsFiddleで利用可能な、テスト済みの実用的なソリューションを次に示します。

$(document).ready(function () {
    var showcar;

    function startAnimation() {

        showcar = setInterval(function () {

            console.log(
                'position: ' 
                + $('.car').css("left"));

            var difference = $(".car").position().left;

            if (difference < 750) {
                $('.car').css("left", "+=2px");
            } else {
                $('.car').css("left", "-=700px");

            }
        }, 10);
    }

    startAnimation();

});

*何が起こっているのかを理解するのに役立つように、位置のコンソール ログを追加しました。

于 2013-09-18T14:45:46.223 に答える