2

中央に垂直に配置されたコンテンツがいくつかあります。ボタンをクリックするだけで、コンテンツを変更したいのですが、そのようにvertical-align: topアニメーション化します (上にスライド)。ただし、これは機能しないようです：

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ビン

4

2 に答える 2

1

残念ながら、アニメーション化することはできませんvertical-align。ごくわずかな例外を除いて、animate 関数は数値に対してのみ機能します。jQuery animate() ドキュメントから:

すべてのアニメーション化されたプロパティは、単一の数値にアニメーション化する必要があります

回避策としてtop、コンテンツの位置を動的に設定してから、アニメーション化することができます。

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

ワーキングデモ

于 2013-08-02T14:17:30.963 に答える