jquery - この同じ関数で間隔をクリアした後、間隔を .click(function() に再起動します [JQuery]

Question

私はJQueryでいくつかのスライダーをやっています。

したがって、トランジションを呼び出す間隔から始めて、誰かが「次へ」ボタンをクリックするとクリアします。彼が間隔の終わりの直前にそれをクリックすると、彼は私のスライダーを読む時間がないでしょう.

.click 関数の翻訳関数の直後に配置しようとしましたが、奇妙なことが起こります... タイミングがクリックの直後ではありません。2 つのインターバルが同時に実行されているようなものか、このようなものです。

クリック遷移後にそれを「再起動」する最もエレガントな方法を誰でも私に言うことができますか?

今のところのコードは次のとおりです：（間隔の2回目の起動なし）

var jq=jQuery.noConflict();  



jq(document).ready(function() {
    jq('.highlight_container').css('x','0');
});



// Animation Loop

jq(document).ready(function() {
    var checkClick = setInterval(function(){
        if (jq('.highlight_container').css('x') === '-2100px'){
            jq('.highlight_container').transition({
            x: '0px',
            duration: '750',
            easing: 'in-out',
            });
        }
        else {
            jq('.highlight_container').transition({
            x: '-=700px',
            duration: '500',
            easing: 'out',          
            });
        }
    }, 5000);

// Next Button  

    jq('.highlight_next').click(function() {
        clearInterval(checkClick);
        if (jq('.highlight_container').css('x') === '-2100px') {
            jq('.highlight_container').transition({
                x: '+=2100px',
                duration: '750',
                easing: 'in-out',
            });
        }   
        else {
            jq('.highlight_container').transition({
                x: '-=700px',
                duration: '500',
                easing: 'out',
            }); 
        }
    });

// Prev Button      

    jq('.highlight_prev').click(function() {
        clearInterval(checkClick);      
        if (jq('.highlight_container').css('x') === '0px') {
            jq('.highlight_container').transition({
                x: '-=2100px',
                duration: '750',
                easing: 'in-out',
            });
        }   
        else {
            jq('.highlight_container').transition({
                x: '+=700px',
                duration: '500',
                easing: 'out',
            }); 
        }
    });
});

任意のawserを前もってありがとう:]

編集：

clik 関数の最後に setinterval() 関数を追加するだけで機能するようです。しかし、それはかなり醜いです。

var jq=jQuery.noConflict();  



jq(document).ready(function() {
    jq('.highlight_container').css('x','0');
});



// Animation Loop

jq(document).ready(function() {
    var checkClick = setInterval(function(){
        if (jq('.highlight_container').css('x') === '-2100px'){
            jq('.highlight_container').transition({
            x: '0px',
            duration: '750',
            easing: 'in-out',
            });
        }
        else {
            jq('.highlight_container').transition({
            x: '-=700px',
            duration: '500',
            easing: 'out',          
            });
        }
    }, 5000);

// Next Button  

    jq('.highlight_next').click(function() {
        clearInterval(checkClick);
        if (jq('.highlight_container').css('x') === '-2100px') {
            jq('.highlight_container').transition({
                x: '+=2100px',
                duration: '750',
                easing: 'in-out',
            });
        }   
        else {
            jq('.highlight_container').transition({
                x: '-=700px',
                duration: '500',
                easing: 'out',
            }); 
        }
        checkClick = setInterval(function(){
            if (jq('.highlight_container').css('x') === '-2100px'){
                jq('.highlight_container').transition({
                x: '0px',
                duration: '750',
                easing: 'in-out',
                });
            }
            else {
                jq('.highlight_container').transition({
                x: '-=700px',
                duration: '500',
                easing: 'out',          
                });
            }
        }, 5000);
    });

// Prev Button      

    jq('.highlight_prev').click(function() {
        clearInterval(checkClick);      
        if (jq('.highlight_container').css('x') === '0px') {
            jq('.highlight_container').transition({
                x: '-=2100px',
                duration: '750',
                easing: 'in-out',
            });
        }   
        else {
            jq('.highlight_container').transition({
                x: '+=700px',
                duration: '500',
                easing: 'out',
            }); 
        }
        checkClick = setInterval(function(){
            if (jq('.highlight_container').css('x') === '-2100px'){
                jq('.highlight_container').transition({
                x: '0px',
                duration: '750',
                easing: 'in-out',
                });
            }
            else {
                jq('.highlight_container').transition({
                x: '-=700px',
                duration: '500',
                easing: 'out',          
                });
            }
        }, 5000);
    });
}); 

20行のコードなしでこの同じ関数を再度呼び出す方法はありますか?