Div高度动画会导致Div在jQuery中更改对齐方式

Div height animation causes divs to change alignment in jQuery

本文关键字：Div 方式 对齐 jQuery 高度 动画      更新时间：2023-09-26

我试图通过点击按钮来设置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>

将vertical-align: bottom添加到.jQuery、.html、.premiere、.photoshop和.css。

更新的Fiddle

这里，对于从上到下设置动画的版本，正如你所希望的那样（如果我理解你是正确的）：

我还在所有的栏中添加了一个公共类，并更新了JS和CSS，以减少代码的冗余

小提琴：http://jsfiddle.net/znxue2wg/

JS、CSS、HTML:

$("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>

相关文章：