Question

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

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

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

将focus提供给textarea
将box-shadow添加到textarea
100ms的延迟
将transition课程添加到textarea
移除box-shadow，然后很好地观看fade out

然而，当我这样做时，它只做一次，所以box-shadow永远不会出现。

或者，如果我删除最后一个阶段，那么框阴影fades in，意味着（4）发生在（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

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

3 个答案: