Div高度动画使Div在jQuery中更改对齐方式。
Div高度动画使Div在jQuery中更改对齐方式。
提问于 2014-10-23 02:04:23
我试图动画的高度5 div点击一个按钮。虽然这些div确实会增加大小，但是动画会使div在顶部而不是底部对齐。如果这有什么意义的话。我更喜欢它在从顶部下来的时候(从顶部对齐)，但是即使它反过来，这个动画只是完成了自己，然后改变了div的位置。
$("button").click(function(){
$("#f").css("display", "inline");
$(".css").css("display", "inline");
$(".html").css("display", "inline");
$(".jQuery").css("display", "inline");
$(".premiere").css("display", "inline");
$(".photoshop").css("display", "inline");
$(".css").animate({height:'300'}, 600);
$(".html").animate({height:'300'}, 600);
$(".jQuery").animate({height:'125'}, 600);
$(".premiere").animate({height:'250'}, 600);
$(".photoshop").animate({height:'325'}, 600);
});p{
transform: rotate(270deg);
margin-top: 60px;
}
#f, .css, .html, .jQuery, .premiere, .photoshop{
height: 0px;
width: 30px;
display: none;
background-color: blue;
}
.css{ background-color: blue }
.html{ background-color: red }
.jQuery{ background-color: orange }
.premiere{ background-color: purple }
.photoshop{ background-color: yellow }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button>Go</button>
<div></div>
<div class="f">
<div class="html"><p>HTML</p></div>
<div class="css"><p>CSS</p></div>
<div class="jQuery"><p>jQuery</p></div>
<div class="premiere"><p>Premiere</p></div>
<div class="photoshop"><p>Photoshop</p></div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-10-23 02:10:50
将vertical-align: bottom添加到.jQuery、.html、.premiere、.photoshop和.css中。
更新的小提琴
Stack Overflow用户
发布于 2014-10-23 02:36:04
在这里，对于自上而下动画的版本，如您所愿(如果我理解您的话)：
我还在所有的条形图中添加了一个公共类，并对JS和CSS进行了一些更新，以减少代码的冗余。
小提琴： http://jsfiddle.net/znxue2wg/
JS，CSS，：
$("button").click(function(){
$(".bar").css("display", "inline");
$(".bar.html").animate({height:'300'}, 600);
$(".bar.css").animate({height:'300'}, 600);
$(".bar.jQuery").animate({height:'125'}, 600);
$(".bar.premiere").animate({height:'250'}, 600);
$(".bar.photoshop").animate({height:'325'}, 600);
});.bar {
display: none;
height: 0px;
width: 30px;
vertical-align: top;
}
.bar.html {background-color: red;}
.bar.css {background-color: blue;}
.bar.jQuery {background-color: orange;}
.bar.premiere {background-color: purple;}
.bar.photoshop {background-color: yellow;}
.bar p {
transform: rotate(270deg);
margin-top: 60px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Go</button>
<div>
<div class="bar html"><p>HTML</p></div>
<div class="bar css"><p>CSS</p></div>
<div class="bar jQuery"><p>jQuery</p></div>
<div class="bar premiere"><p>Premiere</p></div>
<div class="bar photoshop"><p>Photoshop</p></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26520174
复制相关文章
相似问题
腾讯云开发者
