javascript - 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