jQuery animate next div
<p>I'm trying to animate the div within an list item with a click event but can't see why the code isn’t working?</p>

<p>It works when I specify the direct path to the div but I want to keep the script so it does'nt use specific classes.</p>

<pre><code>$('#home ul.circles li').click(function() {
    $(this).next('div').animate({opacity: 0.8, top:'0'}, 1500 );
});
</code></pre>

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

<pre><code>&lt;ul class="circles"&gt;
        &lt;li class="c-1"&gt;&lt;div class="c-1-active"&gt;Text Link&lt;/div&gt;&lt;/li&gt;
        &lt;li class="c-2"&gt;&lt;/li&gt;
        &lt;li class="c-3"&gt;&lt;/li&gt;                             
&lt;/ul&gt;
</code></pre>

<p>I'm trying to reverse the effect but can't seem to store the path to a var?</p>

<pre><code>$('#home ul.circles li').click(function() {
    alert(testing);
    if(testing &gt; "" || testing == $(this).find('div'))
    {
        testing.animate({opacity: 0, top:'180px'}, 1000 );
    }
        $(this).find('div').animate({opacity: 0.8, top:'0'}, 1000 );
        var testing = $(this).find('div');

});
</code></pre>
