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);
});