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も変更しました