Question

I want to make the effect like, after click the box, the box disappeared after expanding its both top and bottom, I did some work, but expends only on bottom. and the effects not quite good, I’d like to make the box bigger. http://jsfiddle.net/wY8Wb/ if someone could help me out? thanks

Answer 1

Check this demo: http://jsfiddle.net/wY8Wb/3/

Code:

$('#videoimg').click(function(){
    $(this).fadeOut('slow');
    $('#color')
        .css({
            top: ($(this).offset().top + $(this).height()/2) + 'px',
            height: 0
        })
        .animate({
            // the hard-coded "9" you see below is half of the 
            // difference between the final heights of the 2 divs == (300-282)/2. 
            // Given here so as to have the color div expand out 
            // equally at top and bottom
            top: ($(this).offset().top - 9) + 'px',
            height: '300px'
        }, 'slow');
})