6

とにかく、上から下ではなく、下から上へのdivボックスの高さの変化をアニメーション化できますか?

この div ボックスは絶対位置にあり、その下のコンテンツへのカーテンのような役割を果たします。

4

3 に答える 3

5

使用しない理由slideUp()/ slideDown():

複数の/速いマウス操作が登録されている場合、バグが発生しやすいためです。 以下のような結果を得ることができない方法を
使用しても、デモで試してみてください。.stop()

これは、高さの切り替えを使用してわずかに変更したもの.animate()です: (ちょうど必要: position:absolute; bottom:0px; display:none;)

デモ 1 (良い方法です)

$('.box').hover(function(){
  $(this).find('.curtain').stop().animate({height: 'toggle'});
});

デモ 2

別の方法は次のとおりです。

var boxHeight = $('.box').innerHeight();  // get element height

$('.curtain').css({top:boxHeight}); // push 'curtain' down

$('.box').hover(function(){
  $(this).find('.curtain').stop().animate({top: 0});  // animate to desired top distance
},function(){
  $(this).find('.curtain').stop().animate({top: boxHeight}); // and on mouseout - back down
});
于 2012-05-21T14:46:05.850 に答える
0

この効果は、上部と高さを同時にアニメートすることで実現できます。最終的な高さを決定する必要があります。

たとえば、次のものがあるとします。

#mydiv{
    top: 200px;
    height: 300px;
    width: 100px;
    background-color: red;
    position: absolute;
};

そして、次のようにアニメーション化された div で終了したい:

#mydiv{
    top: 0px; /* new top */
    height: 500px; /* new height */
    width: 100px;
    background-color: red;
    position: absolute;
};

jquery コード、div をクリックすると:

$("#mydiv").on("click", function(){
   $('#mydiv').animate( {"top": "0px", "height": "500px" } );
});
于 2013-04-24T18:12:26.643 に答える
0 
$('div').slideUp();

これは.slideUp()を使用して、div を0px下から上の高さにアニメーション化します

于 2012-05-21T14:35:46.683 に答える