Photoshop Question posted in
The official user guide can be found here.

Div height animation causes divs to change alignment in jQuery – Photoshop

I’m trying to animate the height of 5 divs on the click of a button. Although these divs do increase in size the animation causes the divs to align at the Top rather than from the bottom. If that makes any sense. I would actually prefer it to animate while coming down from the top (so aligned from the top) but even if its the other way around, this animation just completes itself then changes the divs locations.

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

2

Answers


  1. 0

    Add vertical-align: bottom to .jQuery, .html, .premiere, .photoshop and .css.

    Updated Fiddle

    Login or Signup to reply.
  2. 0

    Here, for the version animating from the top down, as you would prefer it (if I understood you correct):

    I also added a common class to all the bars and updated your JS and CSS a bit, to make your code a little less redundant

    fiddle: 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search