JQuery没有按顺序运行以淡出盒子的阴影

Question

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

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

我想点击一个按钮，并具备以下功能颁布顺序：

1. 给focus到textarea的
2. 添加box-shadow到textarea的
3. 延迟为100ms
4. 向textarea添加transition类
5. 取出box-shadow，看着它fade out很好

然而，当我做到这一点，但这一切的一次，所以box-shadow永远不会出现。或者，如果我删除最后一个阶段，那么盒子的影子fades in，这意味着（4）正在BEFORE（2）之前发生。

有什么想法？

Answer 1

.delay（）方法最适合延迟排队的jQuery 效果。因为它是有限的 - 例如，它不提供一种方式来取消延迟 - .delay（）不是替代JavaScript的原生 setTimeout函数，这可能更适合某些使用 的情况。

来源：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); 
}); 

Answer 2

function ChangeStory(){ 

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

} 

Answer 3

使用jQuery的delay功能建立的东西。

你可以找到演示here