0

通常の jQuery アニメーションは iOS では流暢ではないため ( .hide()、 )、省略形と関数を長い形の関数に変換slideDown()しようとしています。そのため、jQuery.Animateプラグインを使用してこれらのアニメーションを CSS3 に変換し、jQuery のフォールバックを維持できます。.fade().slideDown().animate()

この方法を使用して 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",
});

ただし、これは中央ではなく、左隅から滑り落ちます。

また、おそらく私はこれを完全に間違っています.jQueryフォールバックを提供しながら、iOSデバイスでCSS3アクセラレーショントランジションを使用するより良い方法があります。その場合、共有してください!

4

2 に答える 2

1

slideDown（）`メソッドを使用できます。

$('.zip').slideDown()

デモ

于 2012-06-26T21:52:44.047 に答える
1

width と margin-left もアニメーション化します。または、幅のみをアニメーション化し、余白を自動に設定することもできます (これは、水平方向に中央揃えを意味します)。

于 2012-06-26T21:46:08.660 に答える