Question

我已经在jsFiddle中重新创建了我目前在网站上的内容。我想将点击功能转换为基于时间的动画，从第一个div（我的图像中的图像）开始被“选中”开始。在几秒钟之后，比如2000毫秒，它应该将10px的动画恢复到默认状态，并且下一个div应该将10px的动画降低到“选定”状态，在此状态下它会暂停2000毫秒。我希望继续这个，直到所有元素都以这种方式动画，然后通过在最后一个div动画完成时将第一个div返回到“selected”状态无限期地重复动画过程。我一直在尝试并试图自己解决这个问题，但我似乎无法正确设置延迟。

以下是当前功能的演示：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
        });
    });
});

Answer 1

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

jQuery动画排序

1 个答案: