Question

我在Jquery中使用回调函数后尝试另一个函数。但我不知道为什么第二个功能不起作用，我似乎没有任何拼写错误或我的代码中有什么可以帮助我摆脱这个问题？

这是我的代码。谢谢！

$("#best_1").animate({'opacity':'0'},2000, function(){
  $("#best_1").removeClass("best_1", function(){
    $("#best_1").animate({'opacity':'1'},2000);
    $("#best_1").addClass("best_11");

  });
});

Answer 1

removeClass是同步的

尝试

$("#best_1").animate({'opacity':'0'},2000, function(){
   $(this).toggleClass("best_1 best_11 ").animate({'opacity':'1'},2000);     
});

Answer 2

我假设您想要使用回调来执行特定的执行顺序......我现在没有。

但这是我认为你想要的：

$("#best_1").animate({'opacity':'0'},2000, function(){   // Executes 1st
  $("#best_1").removeClass("best_1");                    // Executes 2nd
  $("#best_1").animate({'opacity':'1'},2000, function(){ // Executes 3rd
    $("#best_1").addClass("best_11");                    // Executes 4th
  });
});

这样，第2,3和4行就在第一个回调中，这是在fisrt动画之后发生的;第4行是第3行第二个.animate()的回调。

某些方法允许在某些事情之后执行回调...但大多数方法都没有。在这些情况下，您可以使用setTimeout()来延迟执行某些操作。

我没有你的CSS ......所以我为下面的例子发明了一些。

关于setTimeout()，它的执行顺序将在第一个动画之后......在它完成动画之前。在“读取”第一行之后立即开始5秒延迟。所以从开始起5秒钟......不是从最后一个动画结束。

$("#best_1").animate({'opacity':'0'},2000, function(){   // Executes 1st
  $("#best_1").removeClass("best_1");                    // Executes 2nd
  $("#best_1").animate({'opacity':'1'},2000, function(){ // Executes 3rd
    $("#best_1").addClass("best_11");                    // Executes 4th
  });
});
setTimeout(function(){
  $(".be_title").html("Hello! I appeared after 5 seconds because of setTimeout.")
},5000);

.best_1{
  color:red;
}
.best_11{
  color:blue;
}
.be_date{
  display:block;
}
.be_title{
  display:block;
  border:1px solid black;
  padding:2em;
}
.be_button{
  display:block;
  width:3em;
  background-color:grey;
  border-radius:6px;
  padding:0.5em 1em;
  margin:0.5em 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="best_1" class="best_1 best_img">
  <span class="be_date">Date 2018</span>
  <span class="be_title">Contents</span>
  <span class="be_button">Check</span>
</div>

在Jquery中的另一个回调中使用回调

2 个答案: