我正在尝试运行这一系列效果，但它不起作用。语法正确但方法错误？答案

【问题标题】：I am trying to run this chain of effects but it doesn't work. Syntax is right but method is wrong?我正在尝试运行这一系列效果，但它不起作用。语法正确但方法错误？
【发布时间】：2013-07-01 22:43:47
【问题描述】：

我已经尝试了几种方法并取得了不同程度的成功，但它似乎总是在某个地方发生故障，我在这里做错了什么？使用 setTimout 对我来说似乎太麻烦了，我相信在 jQuery 中有一个很好的方法可以做到这一点。非常感谢您对此提供的任何帮助。

$(document).ready(function() {

    $('#submitme').click(function() {

        $('#submitme').fadeOut(500, function() {

            $('#progress').delay(500).fadeIn(500, function() {

                $('#progress .meter').delay(500).animate({width : '100%'},2000, function() {

                    $('#progress').delay(500).fadeOut(500, function() {

                        $('.alert-box').delay(500).fadeIn(500);

                    });

                });

            });

        });

    });

});

【问题讨论】：

你能把你的代码放在这里：jsfiddle.net 进行演示吗？

标签： jquery queue delay nested

【解决方案1】：

根据您附加事件处理程序的元素名称，我推断它是提交按钮。如果是这样 - 您需要将 event 传递给您的点击处理程序并调用 event.preventDefault();:

$('#submitme').click(function(e) {
    e.preventDefault();
    //then your code
     $('#submitme').fadeOut(500,.....
    });

您还可以在几个不同的函数上中断代码并使用队列方法链接动画：

function animateProgress(){
   $('#progress').delay(500)
                 .fadeIn(500)
                 .queue(/*next callback function*/);
}

function animateSubmitMe(){
    $('#submitme').fadeOut(500)
                  .queue(animateProgress);
}

animateSubmitMe();

【讨论】：