从底部到顶部的jQuery动画

有没有一种从底部到顶部动画一个元素的高度（让我们说div）的方法？例如，假设我有一个高度为15px的div元素。从底部到顶部的jQuery动画

<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添加更多框（红色，蓝色...）每一个。动画正在工作，但如果应用了我们说的greyBox，它也会激活旁边的红色动画。我尝试从float：left改为inline block，但没有运气。

只有一件事，所有这些盒子被包裹在一个绝对定位的div与宽度：100％，底部：0;左：0;

P.s.我创造了一个小提琴，所以它可以直接看到。 Here it is

非常感谢，

米尔科

来源

2012-06-10 suludi

创建一个jsFiddle，我相信有人会帮助！ –

我想你是对的。谢谢。 – suludi

好的，这里是小提琴：[链接]（http://jsfiddle.net/BsPju/） – suludi

$('.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-10 23:44:10 ahren

谢谢，但它会工作，如果我有更多的盒子？ – suludi

当然会。我使用'.siblings（）'选择器，因此它将选择同一父级中的所有其他框。 – ahren

谢谢，我真的需要这个。我知道它可以与绝对定位一起工作，但它不适合我的需求。这很棒！ – suludi

如果您将float: left更改为display: inline-block并将vertical-align: bottom添加到div，它将显示您希望的方式。

请参阅：http://jsfiddle.net/AVXLq/1/

来源

2012-06-10 23:49:48 jimr

谢谢，我确实改变了内联块，但垂直对齐从来没有跨过我的想法。如果我可以将两个答案都标记为正确的，我会的，但前面的答案是正确的，所以这只是几秒钟的问题。 – suludi

从底部到顶部的jQuery动画

回答

相关问题