jQuery: Sync Animation Example

by Matthew Marcus

HTML

<div id="wrp">
    <div id="box-a" class="box"></div>
    <div id="box-b" class="box"></div>
</div>

CSS

.box {
    height: 100px;
    width: 100px;
    margin-right:10px;
    background:lightblue;
    float:left;
}
#wrp {
    height: 500px;
}

JavaScript

var grow = function () {
    if (!$(this).data('originalHeight')) {
        $(this).data({
            originalHeight: $(this).css('height')
        });
    }

    var height = ($(this).css('height') == $(this).data('originalHeight')) ?
        '400px' : $(this).data('originalHeight');

    $(this).animate({
        height: height
    }, {
        step: function (now, tween) {
            if(now && tween.prop === 'height'){
                console.log(tween);
                console.log(parseInt(now) + 'px');
                $('#box-b').height(parseInt(now) + 'px');
            }
        },
        duration: 500,
        complete: function () {
            $('#box-b').append('Transition Done.<br/>');
        }
    });
};

$(document).ready(function () {
    $('#box-a').on('click', grow);
});