0

現在自分のウェブサイトにあるものとほぼ同じものを jsFiddle で再作成しました。クリック機能を、最初の div (私の場合は画像) が「選択」されて始まる時間ベースのアニメーションに変えたいと思います。数秒後、たとえば 2000 ミリ秒後、10 ピクセル上にアニメートしてデフォルト状態に戻り、次の div は 10 ピクセル下にアニメートして「選択済み」状態にし、2000 ミリ秒一時停止します。すべての要素がこの方法でアニメーション化されるまでこれを続け、最後の div アニメーションが完了したときに最初の div を「選択済み」状態に戻すことで、アニメーション プロセスを無期限に繰り返します。私は自分でそれを理解しようとしてきましたが、遅延を正しく設定できないようです。

現在の機能のデモは次のとおりです: http://jsfiddle.net/uFPtw/5および以下の js:

var prevLeft = 0;
var zInd = $('#projects div').length + 1;
$('#projects div').each(function() {
    prevLeft = prevLeft + 40;
    zInd = zInd - 1;
    $(this).css({
        'left': (prevLeft-40)+'px',
        'z-index': zInd
    });
});
$('#projects div').on('click', function() {
    $(this).css({
        'z-index': $('#projects div').length,
        'box-shadow': '0 0 20px #000',
        'cursor': 'default'
    }).animate({
        'top': '+10px'
    }, 200);
    if ( $('#projects div').css('top') != '0' ) {
        $(this).siblings('div').css({
            'box-shadow': '0 0 10px rgba(0,0,0,0.5)',
            'cursor': 'pointer'
        }).animate({
            'top': '0'
        }, 200);
    }
    zInd1 = 4;
    $(this).prevAll().each(function() {
        zInd1 = zInd1 - 1;
        $(this).css({
            'z-index': zInd1
        });
    });
    $(this).nextAll().each(function() {
        zInd1 = zInd1 - 1;
        $(this).css({
            'z-index': zInd1
        });
    });
});
4

1 に答える 1

0

最初に div`s の総数をキャプチャすると思います (現在の場合)。次に、クリックイベントがトリガーされるか、自動化された機能が開始されると、最後の div に到達したかどうかを確認できます。最初の div に戻り、ターゲット関数を再度呼び出します。

于 2013-04-04T06:30:44.440 に答える