使用 jQuery animate 让 div 从中心向下滑动

Question

由于常规的jQuery动画在iOS上并不流畅（.hide()，slideDown()），我正在尝试将我的速记.fade()和.slideDown()函数转换为手写.animate()函数，因此我可以使用jQuery.Animate插件将这些动画转换为CSS3，同时维护jQuery回退。

我认为使用这种方法淡化div 应该很容易，但尝试让div 从中心滑下来让我头疼。

div 的正常 CSS 是...

.zip{
    width:130px;
    height:70px;
    left:50%;
    top:50%;
    margin-top:-46px;
    margin-left:-76px;
    position: absolute;
    text-align: center;
    z-index: 2;
    background:rgba(0,155,23,.8) url(overlay.png);
    border-radius: 10px;
    padding:10px;
    border:1px solid #fff;
    box-shadow:0 0 40px #000;
} 

然后

我使用以下内容来延迟，然后让div 滑下来......

$(".zip").delay(1000).slideDown(200);

显然，这工作正常，但它不会件拾取。

那么，我如何使用.animate()将其转换为函数？

我的尝试：

.CSS。。。

.zip{
    display:none;
    height:0;
    padding:0;
    /* Plus everything else */
} 

jQuery...

$('.zip').delay(1000).animate({
    display: "block",
    height: "70px",
    padding: "10px",
});

除了这是从左上角滑下来，而不是中间。

另外，也许我这样做完全错误，并且有一种更好的方法可以在iOS设备上使用CSS3加速转换，同时仍然提供jQuery回退，在这种情况下，请分享！

Answer 1

同时对

宽度和左边距进行动画处理。或者，您可以仅对宽度进行动画处理并将边距设置为自动（这意味着水平居中）

Answer 2

你可以使用slideDown（）'方法：

$('.zip').slideDown()

演示