javascript - 函数在 .animation left 属性中不起作用

Question

我有以下代码(函数的一部分):

$stock.click(function () {
    $waste.append($stock.children('.container:lt(3)').card('upturn').droppable('disable').css( "left", function(i) {return ["70px", "85px", "100px"][i];}) );
  });

它采用前 3 个 div(带有类容器)并将它们彼此相邻放置。效果很好!

现在我想用 jquery .animation 为其制作动画。我想出了这段代码:

$waste.append($stock.children('.container:lt(3)').card('upturn').droppable('disable').css( "left", "-70px" ).animate({"left": function(i) {return ["+=70px", "+=85px", "+=100px"][i];}}, "fast") );

我所做的更改:

• .css( "left", "-70px") 将 div 放回原来的 div 堆上，以便我们可以添加动画
• .animate({"left": function(i) {return ["+=70px", "+=85px", "+=100px"][i];}}, "fast") 应该将第一个 div 移动 70px，第二个 div 85px，最后一个 100px

但是它不起作用。这可以做到吗？又如何？

Ps我也尝试过:

$waste.append($stock.children('.container:lt(3):nth-child(1)').card('upturn').droppable('disable').css( "left", "-70px" ).animate({"left": "+=70px"}, "fast"));
$waste.append($stock.children('.container:lt(3):nth-child(2)').card('upturn').droppable('disable').css( "left", "-70px" ).animate({"left": "+=85px"}, "fast"));
$waste.append($stock.children('.container:lt(3):nth-child(3)').card('upturn').droppable('disable').css( "left", "-70px" ).animate({"left": "+=100px"}, "fast"));

虽然这似乎有效，但它并不是没有错误(最后一次单击应包含 3 个 div，但它将显示并移动 2 个 div，再次单击库存 div 后它将显示并移动最后一个剩余的 div)

Answer 1

这应该做:

$waste.append($stock.children('.container:lt(3)').card('upturn').droppable('disable').css( "left", "-70px" );
$waste.append($stock.children('.container:lt(3)').each(function(index, val){
    switch(index){
        case 0:
            $(this).animate({"left":'+=70px'},'fast');
            break;
        case 1:
            $(this).animate({"left":'+=85px'},'fast');
            break;
        case 2:
            $(this).animate({"left":'+=100px'},'fast');
            break;
    }
});