Question

$("#clickme").click(
            function(){
                $(this).slideToggle(1000);
                $(this).load("MYTEXT.txt");
                $(this).slideToggle(1000);
            }   
        )

我希望仅在第一个动画完成后才能显示我的HTML元素的新内容。在这段代码中会发生什么，它首先向上滑动，然后向下滑动新内容，但在完成上滑效果之前会显示新内容！

我该如何解决这个问题？

Answer 1

$("#clickme").click( 
            function(){ 
                $(this).slideToggle(1000, function () {
                    $(this).load("MYTEXT.txt", function () {
                        $(this).slideToggle(1000);
                    });
                });     
            }    
        )

为了让事情在彼此之后发生，你可以使用回调仅在前一个函数运行后运行代码（这对于动画和AJAX调用非常有用）。

Answer 2

您必须将它们链接为回调

$("#clickme").click(function(){
    $(this).slideToggle(1000, function(){
        $(this).load("MYTEXT.txt", function(){
            $(this).slideToggle(1000);
        });
    });
});

Answer 3

试试这个：

$("#clickme").click(
            function(){
                $(this).slideToggle(1000).load("MYTEXT.txt").slideToggle(1000);
            }   
        )

Answer 4

$("#clickme").click(function(){
      $(this).slideToggle(1000, function() {
          $(this).load("MYTEXT.txt", function() {
              $(this).slideToggle(1000);
           });
      });
});

JQuery：内容加载不等待动画完成

4 个答案: