【jQuery(JavaScript)】setInterval()とclearInterval()の使い方

    START
    STOP



    ★

body {
    margin: 20px;
}

.star-wrap {
    width: 100%;
    height: 20px;
    line-height: 20px;
    border: 1px solid #000;

    position: relative;
    margin-top: 50px;
}

.star {
    position: absolute;
    top: 0;
    left: 0;
}

$(function(){
    var timer;                // 繰り返し実行する処理を入れる
    var timerRunning = false; // 実行中:true, 停止中:false
    var direction    =  1;    // ★の移動方向(右:1, 左:-1)
    var currentLeft  =  0;    // ★の現在位置
    var move_unit    = 10;    // ★の移動単位
    var duration     = 10;    // 移動にかける時間
    var interval     = 20;    // 処理のインターバル

    // 星の移動
    function move(delta) {
        // 移動範囲
        var width = $('.star-wrap').width() - 20; // 20は★のサイズ(20がないと枠からはみ出る)

        // 移動方向
        if(currentLeft = 0)     direction =  1; // 右へ
        if(currentLeft >= width) direction = -1; // 左へ

        // 移動
        var moveTo = currentLeft + (delta * direction); // 移動先
        $('.star').animate({
            left : moveTo
        }, duration);

        // 現在位置の更新
        currentLeft = moveTo;
    }

    // 星の移動スタート
    function startTimer() {
        timer = setInterval(function() {
            move(move_unit);
        }, interval);
    }

    // 星の移動ストップ
    function stopTimer() {
        clearInterval(timer);
    }


    /*
        イベント
    */
    $('button.start').click(function() {
        // 実行中は重ねて実行しないようにする
        if(timerRunning) {
            return;
        }
        timerRunning = true;

        startTimer();
    });

    $('button.stop').click(function() {
        stopTimer();
        timerRunning = false;
    });
});