Question

我有一组jQuery效果，我希望一个接一个地运行（目前它们同时运行。有没有办法解决这个问题？

代码如下：

 <SCRIPT>
$(document).ready(function() {

    $(".right").click(function () {
         $(this).show("slide", { direction: "right" }, 1200);
    });

    // Trigger the handler once on document ready
    $(".right").click();

});
</SCRIPT>
<SCRIPT>
$(document).ready(function() {

    $("#left").click(function () {
         $(this).show("slide", { direction: "left" }, 1200);
    });

    // Trigger the handler once on document ready
    $("#left").click();

});
</SCRIPT>
<SCRIPT>
$(document).ready(function() {

    $("#up").click(function () {
         $(this).show("slide", { direction: "down" }, 1200);
    });

    // Trigger the handler once on document ready
    $("#up").click();

});
</SCRIPT>

Answer 1

您需要使用回调。回调函数是在另一个函数完成时运行的函数，在本例中是动画。

http://api.jquery.com/show/

此外，您不需要这么多声明。尝试是这样的

<script>

    $(document).ready(function(){

           $('.right').show("slide", { direction: "right" }, 1200, function(){
                  //first callback
                  $('#left').show("slide", { direction: "left" }, 1200, function(){
                          //second callback
                          $('#up').show("slide", { direction: "down" }, 1200);
                  });
           });

    });

</script>

如果您希望动画也可以在点击时触发，您可以使用现在使用的相同.click语句来执行此操作，而无需//在文档就绪时触发处理程序

Answer 2

这是你追求的东西！

$(document).ready(function() {

        $(".right").click(function () {
             $(this).show("slide", { direction: "right" }, 1200, function() {
                  $(".right").click();
             })
        });
    });

Answer 3

这取决于你如何排序它。检查下面作为一个例子，并根据你的需要进行修改，

.show的最后一个参数是一个回调函数，它将在执行.show后调用

<SCRIPT>
$(document).ready(function() {
    $(".right").click(function () {
         $(this).show("slide", { direction: "right" }, 1200, function () {
                // Trigger the handler once on document ready
                $("#left").click();
         });
    });

    $("#left").click(function () {
         $(this).show("slide", { direction: "left" }, 1200, function () {
              $("#up").click();
         });
    }); 

    $("#up").click(function () {
         $(this).show("slide", { direction: "down" }, 1200);
    });

    // Trigger the handler once on document ready
    $(".right").click();
});
</SCRIPT>

Answer 4

您应该将下一个动画调用为第一个动画回调，以便按顺序为它们设置动画，并且回调是show方法的最后一个参数。

此外，您可以只使用多个$(document).ready()来代替使用多个$(document).ready(function() { $("#left").click(function () { $(this).show("slide", { direction: "left" }, 1200, function () { $("#up").click();//Trigger up click }); }); $("#up").click(function () { $(this).show("slide", { direction: "down" }, 1200); }); $(".right").click(function () { $(this).show("slide", { direction: "right" }, 1200, function () { $("#left").click();//Trigger left click }); }).click();//Trigger the right click });。

{{1}}

如何使一组jquery效果按顺序运行

4 个答案: