0

我已经在 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
        });
    });
});
4

1 回答 1

0

我认为您首先捕获 div`s 的总数（在您现在的情况下），然后当触发点击事件或您的自动化功能启动时，您可以检查是否已到达最后一个 div，据此您可以恢复到第一个 div 并再次调用目标函数。

于 2013-04-04T06:30:44.440 回答