jQuery图像淡化放大顶部和底部px

Question

我想制作这样的效果，点击框后，框在顶部和底部展开后消失了，我做了一些工作，但只在底部消费。效果不太好，我想把盒子做得更大。 http://jsfiddle.net/wY8Wb/如果有人可以帮助我吗？谢谢

Answer 1

选中演示：http://jsfiddle.net/wY8Wb/3/

<强>代码：

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

Answer 2

JSFiddle：http://jsfiddle.net/wY8Wb/17/

$(document).ready(function(){
    $('#videoimg').click(function(){
    $(this).fadeOut('slow');
        $('#color').animate({height: '300px', top: '0px'}, 'slow');

})
});​

也改变了css