Question

For some reason I cannot make jQuery run things sequentially.

See: http://jsfiddle.net/Az9E2/

I would like to click a button, and have the following functions enacted sequentially:

1. Give focus to the textarea
2. Add a box-shadow to textarea
3. Delay for 100ms
4. Add a transition class to the textarea
5. Remove the box-shadow and watch it fade out nicely

However, when I do it, it does everything an once, and so the box-shadow never appears.

Or, if I remove the final stage, then the box shadow fades in, meaning that (4) is happening BEFORE (2).

Any thoughts?

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.

source: http://api.jquery.com/delay/

---

The other points you mention of course all happen (to the eye) at once, because there is no delay preventing it.

---

try: 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);
});