Animate both width and height on click with jQuery

Trying to animate both the width and the height of these boxes on click.

See fiddle:

http://jsfiddle.net/C开发者_JAVA百科qDXn/1/

I've been successful with getting the width to animate... no just need to prevent that awkward jump at the end of the animation.

edit:

worth noting I cannot set a static height on the li's

• What's 200? in em? px? use a measurement. '200px'.

• You didn't animate the height as well as the width: {width: '200px', height: '200px'}

• I dropped the .active css rule for auto height. The animation needs to take care of that.

code:

$(document).delegate('.rewards-process li:not(.active)', 'click', function(e)
    {
        var toActive = $(this);
        $('.rewards-process li.active').addClass('transition');
        $('.rewards-process li.active').animate({
            width:'90px'
            , height: '90px'},1000,function() {
                $('.rewards-process li.active').removeClass('active').removeClass('transition');
            });

$(toActive).animate({
    width:'200px'
    , height: '200px'},300,function(){
        //animation complete
        $(toActive).addClass('active')
    });

});

I sometimes use this hack for figuring out a dynamic height:

function getElementHeight(e, width) {
 $("body").append("<div id='test' style='width:" + width + "'>" + e.html() + "</div>").hide();
    var h = e.outerHeight();
    e.remove();
    return h;
}

You need to make sure the CSS doesn't mess this up.

Basically you create the element with the final width, calculate its height and then remove it. This function will return a number, you'll need to add px and you can use it in your animation.

But you don't really need this. Height animates automatically for you, your CSS rules just disabled it. For example, this fiddle will work just fine.

To animate the height, just add a height value under the width in the animate call.

That jump at the end is caused by the browser trying to automatically re-layout all the elements. In order to prevent that, you should put them all into a grid, then re-layout the grid each time the animation finishes.

This line on your css is causing the jump.

.rewards-process .active img, .rewards-process .active p {display:block; }

Try removing the "display:block" property and it should went smoothly. Find a way to have a remedy for that element. It should be easy.