jquery animation

Question

I have an animation that fires on click.

I have four images and I want to make larger on click and display some text.

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.

here is the html

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

here is the jquery

$(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');  
        }
    });

});

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

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

$(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 );

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

credit to Nicolas C.

i also tried

$('#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');   
        }
    }
});

works but not very user friendly if they are clicking and it doesnt respond

Answer 1

This may not be the best solution, but try it and let me know if this is what you intend to do, knowing that I replaced your images with 24x24 icons and assumed the final behaviour you are expecting.

separate css file containing:

div.item{
    height: auto;
    border: 1px solid red;
}
img.icon{
    display: inline;
    position: relative;
    top: 0px;
}

div.content{
    display: inline-block;
    position: relative;
    top: 0px;
}

div.inactive div.content{
    display: none;
}
div.inactive{
    width: 16px;
    height: 16px;
}

HTML part:

<div id="nav" style="width: 980px; position: absolute; left: 100px; overflow: hidden" >
<div class="item inactive">
    <img class="icon" src="images/image1.png" width="16" height="16" />
    <div class="content"> 
        <h2 style="color:#009DD8">Title1</h2>       
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p>
    </div> 
 </div>
 <div class="item inactive">
    <img class="icon" src="images/image2.png" width="16" height="16" />
    <div class="content">
        <h2 style="color:#902272">Title2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p></div>
</div>
 <div class="item inactive">
    <img class="icon" src="images/image3.png"  width="16" height="16" />
    <div class="content">
        <h2 style="color:#68AA41">Title3</h2>    
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p>
    </div>  
</div>
 <div class="item inactive">
    <img class="icon" src="images/image4.png" width="16" height="16" />
    <div class="content">
       <h2 style="color:#F5B21D">Title4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p>
    </div>  
</div>

javascript part:

$(document).ready(function() {
    $('#nav div.item').click(function(){
        var myItems = $('.item');
        var pendingAnimation = false;
        for(var i = 0; i < myItems.length; i++)
        {
            if($(myItems[i]).is(':animated')){
                pendingAnimation = true;
                break;
            }
        }
        if(!pendingAnimation){
            //extend the item
            $(this).animate({"width": 700, "height": 150}, 1500 );
            //make it an active item
            $(this).addClass('active');
            //grow the icon
            $(this).find('img').animate({"width": 24, "height": 24}, 1500 );
            //make the content of the item fade in
            $(this).find('div.content').fadeIn(100);

            //Fading out the content of all the other active elements
            $('.item').not($(this)).find('div.content').fadeOut(500);
            //Shrinking all the other active icons
            $('.item').not($(this)).find('img').animate({"width": 16,"height": 16}, 1500 );
            //Shrinking all the other active items
            $('.item').not($(this)).animate({"width": 16,"height": 16}, 1500 );
            //making all the other items as "inactive"
            $('.item.active').removeClass('active').addClass('inactive');
        }
    });        
}); 

Effect: whenever you click onto an icon, it expands the clicked div.item, makes it active and animates any other "active" element with a reverse animation.

Answer 2

Try to use complete callback for other animation like follows:

$("first_animation").animate( {"width": 244,"height": 316}, 1500, 'swing',function(){
  $("second_animation").animate( {"width": 244,"height": 316}, 1500, 'swing',function(){
    $("third_animation").animate( {"width": 244,"height": 316}, 1500, 'swing');
  })
})

above code will aminate all three div first_animation, second_animation and third_animation. one by one.

Answer 3

Try utilizing the .animate() call back function -

http://api.jquery.com/animate/

$('.active').not(this).animate({"width": 148,"height": 190}, 1500, function() {
   $(this).removeClass('active');
});