JQuery 未按顺序运行以淡出框阴影

Question

出于某种原因，我无法让 jQuery 按顺序运行。

参见:http://jsfiddle.net/Az9E2/

我想单击一个按钮，并按顺序执行以下功能:

1. 将焦点赋予文本区域
2. 向文本区域添加box-shadow
3. 延迟100ms
4. 向文本区域添加一个 transition 类
5. 移除box-shadow并观察它淡出效果

但是，当我这样做时，它会一次完成所有操作，因此 box-shadow 永远不会出现。

或者，如果我删除最后一个阶段，则框阴影淡入，这意味着 (4) 发生在 (2) 之前。

有什么想法吗？

Answer 1

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

来源:http://api.jquery.com/delay/

---

您提到的其他点当然都会立即发生(眼睛)，因为没有延迟阻止它。

---

尝试:http://jsfiddle.net/JH4fM/2/

$('#change').on('click', function () {
  var $el = $(".snapp_view_ask_question_textarea");

  $el.focus().css("box-shadow", "rgba(139, 0, 0, 0.5) 0px 0px 30px 2px");
  setTimeout(function () {
    $el.css("box-shadow", "");
  }, 400);
});