Delay a ready function() in javascript or jquery
<pre><code>//this code animates the divs to the left after every 5 secs
$(document).ready(function() {

    var refreshId = setInterval(function() {
        $('.box').each(function() {
            if ($(this).offset().left &lt; 0) {
                $(this).css("left", "150%");
            } else if ($(this).offset().left &gt; $('#container').width()) {
                $(this).animate({
                    left: '50%'
                }, 500);
            } else {
                $(this).animate({
                    left: '-150%'
                }, 500);
            }
        });
    }, 5000);)
};​
</code></pre>

<p>In the above code, whenever the page gets loaded the <code>div</code> elements keep sliding every 5 secs. But there is a button in my webpage which, when clicked, moves the <code>div</code> elements to the left or right respectively according to the button clicked. But the problem is the auto animation and animation occuring on buuton click sometimes overlap. So whenever I click the button I want to delay the auto animation in <code>document.ready</code> by 5 secs again.</p>

<p>This is shown in this <a href="http://jsfiddle.net/9FPBA/2" rel="nofollow">jsFiddle</a>. When you keep clicking on the "left animation" or "right animation" buttons, the divs overlap sometimes. So I just want to delay the auto animation whenever I click the buttons.</p>
