JS Drag slider stops to work when container position is adjusted via jQuery
<p>I am using JS based Drag Slider <a href="http://code.ovidiu.ch/dragdealer/" rel="nofollow">DragDealer</a>. The slider div is placed in a content slider that runs using jQuery. The Drag Slider works as long as its parent div is not animated to move to left by 200px.</p>

<p>Fiddle: <a href="http://jsfiddle.net/gentrobot/9b5Xg/3/" rel="nofollow">http://jsfiddle.net/gentrobot/9b5Xg/3/</a></p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div style="position:relative;width:400px;height:100px;overflow:hidden;"&gt;
    &lt;div id="1" style="width:200px;float:left;position:absolute;left:0px;"&gt;
        Test
    &lt;/div&gt;
    &lt;div id="2" style="width:200px;float:left;position:absolute;left:200px;"&gt;
       &lt;!-- Drag Slider div starts --&gt;
        &lt;div id="my-slider" class="dragdealer"&gt;
            &lt;div class="red-bar handle"&gt;drag me&lt;/div&gt;
        &lt;/div&gt;
       &lt;!-- Drag Slider div ends --&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;a href="#" id="clk"&gt;Click to slide&lt;/a&gt;
</code></pre>

<p><strong>jQuery</strong>(other than JS for Dragdealer):</p>

<pre><code>$('#clk').click(function(){
    $('#1').animate({left:'-200px'});
    $('#2').animate({left:'0px'});
    });​
</code></pre>
