2

我正在尝试在带有队列的 div 上做一些动画,但我觉得自己很愚蠢,因为我无法掌握它......我让它在一个 div 上排队动画,但我希望它在几个 div 上完成。

问题:点击 div3->

Div1 应该变得透明(0.5)

完成后

Div2 应该向右移动+50px;

完成后

div1 应该移到顶部 +50px

完成后

Div2 应该变得透明(0.5)

我有以下代码,但它不会按预期工作。

    $("#div3").click(function(){
                        $("#div1")
.queue(function(next) {
    $(this).animate({opacity: 0.5}, 
    {duration: 1000, queue: true});
    next();
})
.queue(function(next) {
                $("#div2").animate({right: "+=50"},
    {duration: 2000})
    next(); 

})

 .queue(function(next) {
                 $(this).animate({top: "+=50"},
    {duration: 2000})
    next(); 


})
  .queue(function(next) {
                 $("#div2").animate({opacity: 0.5}, 
    {duration:4000, queue: true});

    next(); 
                  });           

                          });

有谁可以帮我离开这里吗?先感谢您

4

1 回答 1

5

您可以尝试使用以下代码

$("#div3").click(function(){
   $("#div1").animate({opacity: 0.5},{duration: 1000}, function() {
        $("#div2").animate({right: "+=50"},{duration: 2000}, function(){
            $("#div1").animate({top: "+=50"},{duration: 2000}, function(){
                $("#div2").animate({opacity: 0.5}, {duration:4000});
            });
        });
    });
});
于 2013-10-04T10:22:15.673 回答