Question

我有一些内容在中间垂直对齐。点击一个按钮，我希望所说的内容更改为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 Bin

Answer 1

很遗憾，您无法为vertical-align制作动画。除了极少数例外，animate函数仅适用于数值。来自jQuery animate() docs：

应将所有动画属性设置为单个数值

作为一种变通方法，您可以动态设置内容的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);
});

<强> Working Demo

Answer 2

如果您使用测量，现在可以为垂直对齐设置动画！

vertical-align values

将您的vertical-align设置为％或px之类的内容，并在其上包含转换。

或者使用jquery，应用包含css关键帧的类，如下所示：

＆＃13;

.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% }  }

＆＃13;

<div class="item5">1</div>
<div class="item6">2</div>

＆＃13;

我不确定浏览器是否支持！

jQuery动画垂直对齐

2 个答案: