我已经在 jsFiddle 中大致重新创建了我目前在我的网站上拥有的内容。我想把点击功能变成一个基于时间的动画,从第一个 div(在我的例子中是图像)被“选择”开始。几秒钟后,比如 2000 毫秒,它应该动画返回 10px 到默认状态,下一个 div 应该动画下降 10px 到“选定”状态,它会暂停 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
});
});
});