現在自分のウェブサイトにあるものとほぼ同じものを 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
});
});
});