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也