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

Question

我已经尝试了几种不同程度的成功方法，但它似乎总是在某个地方发生故障，我在这里做错了什么？使用 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);

                    });

                });

            });

        });

    });

});

Answer 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();