jQuery Scale and Fade at the same time

Question

So I can make a div to scale nicely from it\'s center pivot: http://jsfiddle.net/uTDay/

However, the transition starts to change when I add in content inside the div: ht

Answer 1

Fade and scale at same time. This could be refactored a bit but this is the idea:

$(".btn a").click(function () {
    var boxleft = $('.box').outerWidth()/2;
    var boxtop  = $('.box').outerHeight()/2;
    var imgleft = $('.box img').outerWidth()/2;
    var imgtop  = $('.box img').outerHeight()/2;
    $('.box').animate({
        'opacity' : 0,
        'width': 0, 
        'height': 0,
        'left': boxleft + 'px',
        'top': boxtop + 'px'
    });
    $('.box img').animate({
        'opacity' : 0,
        'width': 0, 
        'height': 0,
        'left': imgleft + 'px',
        'top': imgtop + 'px'
    });
});

​

CSS (added position: relative):

.box {
    display: block;
    width:200px;
    height:200px;
    background-color: red;
    position: relative;
}

DEMO: http://jsfiddle.net/uTDay/12/

​