2

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

请参阅：http: //jsfiddle.net/Az9E2/

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

  1. 给focus文本区域
  2. 添加box-shadow到文本区域
  3. 延迟为100ms
  4. transition向文本区域添加一个类
  5. 删除box-shadow并fade out很好地观看

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

或者，如果我删除最后阶段，那么 box shadow fades in，这意味着 (4) 发生在 (2) 之前。

有什么想法吗？

4

3 回答 3

2

.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);
});
于 2012-09-04T12:13:58.647 回答
0 
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);

}
于 2012-09-04T12:27:02.080 回答
0

使用 jquery 的delay函数构建一些东西。

你可以在这里找到演示

于 2012-09-04T12:30:37.497 回答