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

Question

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

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

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

1. 将 焦点 置于文本区域
2. 在文本区域添加一个box-shadow
3. 延迟 100 毫秒
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);
});