moving div right left continously in jquery
<p>I am trying to move a <code>div</code> continuously left and right on page load. But what I did is moving on click. And that's what I don't want. Here is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;body&gt;

&lt;a href="" class="left"&gt;left&lt;/a&gt; | &lt;a href="" class="right"&gt;right&lt;/a&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;div id="foo" style="background:red;width:100px;height:100px;position:absolute"&gt;&lt;/div&gt;

&lt;script&gt; 
$('.right').click(function(e) {
    e.preventDefault();
    $('#foo').css({ 'right': '0px', 'left': '' }).animate({
        'right' : '30px'    
    });                    
});

$('.left').click(function(e) {
    e.preventDefault();
    $('#foo').css({ 'right': '', 'left': '0px' }).animate({
        'left' : '30px'
    });                    
});
&lt;/script&gt; </code></pre>
</div>
</div>
</p>