1

1 つの要素の高さ (div としましょう) を下から上にアニメーション化する方法はありますか? たとえば、高さが 15px の div 要素があるとします。

<div class='greyBox'>
<p>Example text</p>
</div>

そしてcssは次のとおりです。

.box{height:15px;width:60px;backgroundColor:#000;float:left;margin-left:20px;}
.box p{opacity:0;}

次に、この jQuery を使用します。

 $('.greyBox').mouseenter(function(){
     $(this).animate({height:'50px'},700).children('p').animate({opacity:1},200);
     });

次に、それぞれに同じ css が適用されたボックス (赤、青...) を追加します。アニメーションは機能していますが、たとえば grayBox に適用すると、隣にある赤いものもアニメーション化されます。float:left から inline ブロックに変更しようとしましたが、うまくいきませんでした。

1 つだけ、これらのボックスはすべて、幅:100%、下:0;左:0; の絶対位置の div にラップされています。

Ps フィドルを作成したので、直接見ることができます。ここにあります

どうもありがとう、

ミルコ

4

2 に答える 2

2 
   $('.greyBox').mouseenter(function(){

   $(this).animate({height:'50px'},700).children('p').animate({opacity:1},200);
       $(this).siblings().animate({marginTop: '35px'}, 700)

   });

http://jsfiddle.net/BsPju/1/

marginTop兄弟要素の をアニメーション化することで、高さを相殺することができます。

absoluteそれ以外の場合は、bottom:0宣言を使用してそれらをすべて配置する必要があります。

于 2012-06-10T23:44:10.640 に答える
1

divに変更float: leftしdisplay: inline-blockて追加vertical-align: bottomすると、希望どおりに表示されます。

参照: http://jsfiddle.net/AVXLq/1/

于 2012-06-10T23:49:48.693 に答える