jquery animation
<p>I have an animation that fires on click.</p>

<p>I have four images and I want to make larger on click and display some text.</p>

<p>problem I'm having is that you can click the images at will and they all start resizing which then causes it to not behave.</p>

<p>here is the html</p>

<pre><code>&lt;div id="nav" style="width: 980px; position: absolute; left: 100px; overflow: hidden" &gt;
&lt;div class="item active"&gt;
    &lt;img src="images/image1.png" width="148" height="190" /&gt;
    &lt;div style="width:350px; position: absolute; left: 250px; bottom: 0px; z-index: 100"&gt; 
        &lt;h2 style="color:#009DD8"&gt;Title1&lt;/h2&gt;       
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt;
    &lt;/div&gt; 
 &lt;/div&gt;
 &lt;div class="item"&gt;
    &lt;img src="images/image2.jpg" width="148" height="190" /&gt;
    &lt;div style="width:350px; position: absolute; left: 250px; bottom: 0px; z-index: 100"&gt;
        &lt;h2 style="color:#902272"&gt;Title2&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
 &lt;div class="item"&gt;
    &lt;img src="images/image3.png"  width="148" height="190" /&gt;
    &lt;div style="width:350px; position: absolute; left: -375px; bottom: 0px; z-index: 100"&gt;
        &lt;h2 style="color:#68AA41"&gt;Title3&lt;/h2&gt;    
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt;
    &lt;/div&gt;  
&lt;/div&gt;
 &lt;div class="item"&gt;
    &lt;img src="images/image4.png" width="148" height="190" /&gt;
    &lt;div style="width:350px; position: absolute; left: -395px; bottom: 0px; z-index: 100"&gt;
       &lt;h2 style="color:#F5B21D"&gt;Title4&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt;
    &lt;/div&gt;  
&lt;/div&gt;
</code></pre>

<p></p>

<p>here is the jquery</p>

<pre><code>$(document).ready(function() {
    $("#nav div.active").animate({"width": 244,"height": 316}, 1500 ).addClass('active');
    $("#nav div.active").find('img').animate({"width": 244, "height": 316}, 1500);
    $("#nav div.active").find('div').fadeIn(100);

    $('#nav div').click(function(){        
        if($(this).hasClass('active'))   
        {  
            $(this).animate({"width": 148, "height": 190}, 1500 ).removeClass('active');
            $(this).find('img').animate({"width": 148, "height": 190}, 1500 );
            $(this).find('div').fadeOut(500);
        }
        else    
        {
            $(this).animate({"width": 244,"height": 316}, 1500 ).addClass('active');
            $(this).find('img').animate({"width": 244, "height": 316}, 1500 );
            $(this).find('div').fadeIn(100);
            $('.active').not(this).find('img').animate({"width": 148,"height": 190}, 1500 );
            $('.active').not(this).find('div').css({"display": "none"});
            $('.active').not(this).animate({"width": 148,"height": 190}, 1500 ).removeClass('active');  
        }
    });
</code></pre>

<p>});</p>

<p>I have tried adding .stop() in places but this makes thing worse. Any ideas?</p>

<p>i need these lines to fire at the sametime, one resizes the image the other its container div. if i fireone after the other then it screws up</p>

<pre><code>$(this).animate({"width": 244,"height": 316}, 1500 ).addClass('active');
$(this).find('img').animate({"width": 244, "height": 316}, 1500 );

$(this).animate({"width": 148, "height": 190}, 1500 ).removeClass('active');
$(this).find('img').animate({"width": 148, "height": 190}, 1500 );
</code></pre>

<p>i guess what i want to do is delay the click function until the current animation is complete or better still if another is clicked during an animation to cancel it and return to normal state before firing the onclick function</p>

<p>credit to Nicolas C.</p>

<p>i also tried </p>

<pre><code>$('#nav div').click(function(){

    if(!$('#nav div').is(':animated'))
    { 
        if($(this).hasClass('active'))   
        {  
            $(this).animate({"width": 148, "height": 190}, 1500 ).removeClass('active');
            $(this).find('img').animate({"width": 148, "height": 190}, 1500 );
            $(this).find('div').fadeOut(500).stop(true, true);
        }
        else    
        {
            $(this).animate({"width": 244,"height": 316}, 1500 ).addClass('active');
            $(this).find('img').animate({"width": 244, "height": 316}, 1500 );
            $(this).find('div').fadeIn(100).stop(true, true);

            $('.active').not($(this)).find('img').animate({"width": 148,"height": 190}, 1500 );
            $('.active').not($(this)).find('div').fadeOut(500).stop(true, true);
            $('.active').not($(this)).animate({"width": 148,"height": 190}, 1500 ).removeClass('active');   
        }
    }
});
</code></pre>

<p>works but not very user friendly if they are clicking and it doesnt respond</p>
