2

私は5つの画像を持っており、クリックすると、50ピクセル離れてそれらを並べてアニメーション化しようとしています。

現在、私は最初の子と他のすべての子をアニメーション化していますが、残りは50ピクセルですが、すべてが重なり合っています。

これが私のスクリプトです：

var fadedur = 200,
    fadeop = 0.5,
    imgwidth = 220,
    imgleft = 40,
    imgfirst = -200,
    imgfh = -100;

$('img').on('click', function(){
    $('img').css('position','absolute').css('display','block');

    $('.cs').find(':first-child').stop().animate({
            "marginLeft": imgfirst,
            "margin-top": imgfh,
        }, 300);

    $('.cs').find(':first-child').next('img').each(function() {         
        $(this).stop().animate({
            "marginLeft": imgfirst + imgwidth + imgleft,  // imgfirst should
            "margin-top": imgfh,                          // be something that
        }, 300);                                          // states prev()
    });

});​

これが私のフィドルです：http：//jsfiddle.net/STgQC/

私はそれらを次のように見せようとしています：

ここに画像の説明を入力してください

だから基本的に私は言うだろう何かが必要です：

前の要素の位置+画像の幅+50px左にアニメーション化します。

4

2 に答える 2

2

$('.cs').find(':first-child').next('img')せいぜい1つの要素に一致するので、それぞれを呼び出すのは無意味です。この更新されたフィドルhttp://jsfiddle.net/STgQC/1/
をチェックしてください。これはあなたが探している動作ですか？

于 2012-04-28T00:33:57.143 に答える
2

.each()の結果を繰り返しnext()ます。あなたの場合、next()最初の画像のみを返します。したがって、コードは1つの画像のみを繰り返します。

2つの反復を1つの論理的な反復に結合します。

次のことを試してください（私のために働いた）：
ここでもフィドル：http：//jsfiddle.net/FranWahl/mYRdU/1/

var fadedur = 200,
    fadeop = 0.5,
    imgwidth = 220,
    imgleft = 40,
    imgfirst = -200,
    imgfh = -100;

$('img').on('click', function(){    
    $('img').css('position','absolute').css('display','block');

    var newLeft = imgfirst;

    $('.cs').find('img').each(function(){
        $(this).stop().animate({
            "marginLeft": newLeft,//imgfirst + imgwidth + imgleft,
            "margin-top": imgfh,
        }, 300);

        newLeft += imgwidth + imgleft;
    });                 
});​
于 2012-04-28T00:34:02.363 に答える