函数在 .animation 左属性中不起作用

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，第二个 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;
    }
});