Javascript jQuery图像淡入放大顶部和底部px

我想让效果像，点击盒子后，盒子在顶部和底部都展开后消失了，我做了一些工作，但只在底部花费。而且效果不太好，我想把盒子弄大一点。如果有人能帮我？谢谢

---

检查此演示：

代码：

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

---

检查此演示：

代码：

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

JSFiddle：

css也发生了变化

jsiddle:

也改变了css