jQuery image fade 확대 위아래 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도