CODEWITHSUNDEEP
jquerycss
Chris
Chris

Reputation: 2646

jQuery animate vertical-align

I have some content vertically aligned in the middle. At the click of a button, I would like said content to change to vertical-align: top but animate as it does so (slide up). It seems this doesn't work though:

HTML

<div id="container">
  <div id="content">Hello World</div>
</div>

<input type="button" id="myButton" value="No Animation" />
<input type="button" id="myButton2" value="Animation" />

CSS

#container { width: 500px; height: 400px; background: #eee; }
#container:before { content: ''; display: inline-block; width: 1px; height: 100%; vertical-align: middle; background: red; }
#content { display: inline-block; vertical-align: middle; background: lime; }

JS

$('#myButton').click(function(){
  $('#content').css('vertical-align', 'top');
});

$('#myButton2').click(function(){
  $('#content').animate({ 'vertical-align': 'top' }, 500);
});

JS Bin

Upvotes: 2

Views: 3159

Answers (2)

Clarence
Clarence

Reputation: 46

You can now animate vertical-align if you use a measurement!

vertical-align values

set your vertical-align to something like a % or a px and include a transition on that.

Or using jquery, apply a class that contains a css keyframe like so:

.item5, .item6 {
  color: #fff;
  display: inline-block;
  text-align: center;
}

.item5 {
  width: 100px;
  height: 100px;
  background: #03A9F4;
}
.item6 {
  width: 150px;
  height: 150px;
  background: #ff5722;

}

.item6:after {
  content: '';
  width: 1px;
  height: 1px;
  background: black;
    -webkit-animation: move 2s infinite alternate;
     -moz-animation: move 2s infinite alternate;
       -o-animation: move 2s infinite alternate;
          animation: move 2s infinite alternate;
}

@-webkit-keyframes move { from { vertical-align: 0% } to { vertical-align: 100% }  }
   @-moz-keyframes move { from { vertical-align: 0% } to { vertical-align: 100% }  }
     @-o-keyframes move { from { vertical-align: 0% } to { vertical-align: 100% }  }
        @keyframes move { from { vertical-align: 0% } to { vertical-align: 100% }  }
<div class="item5">1</div>
<div class="item6">2</div>

I'm not sure of the browser support though!

Upvotes: 1

colestrode
colestrode

Reputation: 10668

Unfortunately, you can't animate vertical-align. With very few exceptions, the animate function only works on numeric values. From the jQuery animate() docs:

All animated properties should be animated to a single numeric value

As a workaround, you could set the top position of the content dynamically, then animate that:

var content = $('#content'),
    contentHeight = content.height();
    containerHeight = $('#container').height()
;

content.css("top", containerHeight/2 - contentHeight/2)

$('#myButton').click(function () {
    content.css('top', 0);
});

$('#myButton2').click(function () {
    content.animate({
        'top': 0
    }, 500);
});

Working Demo

Upvotes: 1

Related Questions