0

.hide()由于常规的 jQuery 动画在 iOS ( , )上不流畅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 后备，在这种情况下，请分享！

4

2 回答 2

1

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

于 2012-06-26T21:46:08.660 回答
1

您可以使用 slideDown()` 方法：

$('.zip').slideDown()

演示

于 2012-06-26T21:52:44.047 回答