1

http://jsfiddle.net/ZGnTe/

    function iphoneAnimate() {
        $('.iphone-screen div').repeat().css({
        opacity: 0,
        top: 0
    })
        .each($).fadeTo(1000, 1).animate({
        top: $('.iphone-screen').height() - $(this).find('img').height()
    }, 4000).fadeTo(1000, 0, $);
}

iphoneAnimate();

$(this) は、画像を含む div を返しません。$(this) 内の img タグの高さを取得しようとすると、まったく値が返されません。jquery-timing プラグインを使用していますが、問題はプラグインではなく構文にあると思います。よくわかりません。

一番上の値は負の数でなければなりません。たとえば、.iphone-screen の高さ (577) から現在の div 画像の高さ (最初の画像は 1375) を引いたものです。これにより、画像のdivがアニメーション化され、画面の画像の下部にほぼ到達するはずです.

4

3 に答える 3

0

おそらく、.animate() 関数に渡すプロパティが関数自体ではないためです。

同じ結果を得ることができる別のセレクターを試してください。

function iphoneAnimate() {
    $('.iphone-screen div').repeat().css({
        opacity: 0,
        top: 0
    })
        .each($).fadeTo(1000, 1).animate({
        top: $('.iphone-screen').height() - $('div img').height()
    }, 4000).fadeTo(1000, 0, $);
}

ここにフィドルへのリンクがあります： http://jsfiddle.net/ZGnTe/1/


「this」オブジェクトは、コールバック関数でのみアクセスできると思います。

「div img」セレクターの一般性を補うために、フィルター ( など.filter(":animated")) を追加して、アニメーション化されているアイテムのみを取得できます。

次の例のように、各関数を拡張することをお勧めします: ( https://api.jquery.com/each/#example-1 )。

于 2014-03-27T15:47:16.977 に答える