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） / p>

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;
    }
});

功能不起作用.animation left property

1 个答案: