如何在没有额外功能的情况下延迟jquery prop(，)

Question

我有一些单选按钮，我想改变哪一个是用jQuery检查所有的时间半秒后图像褪色，不添加任何额外的功能，这是我的代码:

$("#myImage").fadeOut(1000);
$("#myRadioInput").delay(500).prop("checked",true)

为什么它不像我想要的那样工作?

Answer 1

动画是非阻塞的。这些函数实际上会同时被调用。您可以在这里看到您的示例:

$("#doIt").on('click', function(e) {
  e.preventDefault();
  $("#myDiv").fadeOut(1000);
  $("#myRadioInput").delay(500).prop("checked", true);
})

#myDiv {
  height: 10px;
  width: 10px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="doIt">Do It!</button>
<div id="myDiv"></div>
<input id="myRadioInput" type="checkbox">

同样，延迟也不会像你期望的那样起作用。它不会"暂停"链。它为队列添加延迟，通常是fx， 将允许您暂停进一步的动画，但不暂停链中的下一个调用。你可以在文档中看到这样的例子。

在这个问题中，你说:

而不添加任何额外的函数

我不明白这个要求背后的动机。显而易见的解决方案是使用"额外"函数。毕竟我们是在编程;)

$("#doIt").on('click', function(e) {
  e.preventDefault();
  $("#myDiv").fadeOut(1000, function() {
    setTimeout(function() {
      $("#myRadioInput").delay(500).prop("checked", true);
    }, 500);
  });
})

#myDiv {
  height: 10px;
  width: 10px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="doIt">Do It!</button>
<div id="myDiv"></div>
<input id="myRadioInput" type="checkbox">

Answer 2

你必须包括1000ms的衰落时间，因为500ms的延迟时间在衰落开始时开始计数:

$("#myImage").fadeOut(1000);
$("#myRadioInput").delay(1500).prop("checked",true);

OR start count after fadeOut() function end:

$("#myImage").fadeOut(1000,function(){
  $("#myRadioInput").delay(500).prop("checked",true);
});