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

Question

我有一些单选按钮，我想在图像褪色后半秒一直用 jQuery 更改哪个单选按钮，不添加任何额外功能，这是我的代码：

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

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

Answer 1

您必须包括您的 1000 毫秒衰落时间，因为您的 500 毫秒延迟时间在衰落开始时开始计算：

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

或在fadeOut()函数结束后开始计数：

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

Answer 2

动画是非阻塞的。这些功能实际上将同时被调用。你可以在这里看到你的例子：

$("#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">

此外，delay does not function as you expect. It does not "pause" the chain. It adds a delay to a queue, normally fx, which would allow you to pause further animations, but not pause the next call in your chain. You can see examples of this in the docs。

在问题中，你说：

without adding any extra function

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

$("#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">

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

How to delay jquery prop(,) with no extra function

html

benchmarking

jquery

timing

delay