Question

我想使用jQuery来实现多种效果。当用户单击某个元素时，它会调用该单击处理程序中的一组函数。 jQuery中有没有办法在函数中执行的每个动作之间有延迟？

示例是：

   $(function() {
    $('.activator').on('click', function() {
      $(this).toggleClass('animated');
      $('.app').css('background',$(this).css('background'));
  });
})

不是让激活元素执行它从类接收的动画，然后接收背景的应用程序，它们都发生在同一时间，甚至看不到动画。如何设置两者之间的延迟，或多个？

谢谢！

Answer 1

如果它是CSS动画，那么您需要为animationend / transitionend

设置一个事件

$('.activator').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
    $('.app').css('background',$(this).css('background'));
});
$('.activator').on('click', function() {
    $(this).toggleClass('animated');
});

演示

＆＃13;

$('.activator').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
  $('.app').css('background', $(this).css('background'));
});
$('.activator').on('click', function() {
  $(this).toggleClass('animated');
});

＆＃13;

.activator {
  transition: all 1s;
  width: 200px;
  height: 50px;
  background: red;
}
.activator.animated {
  height: 500px;
}
.app {
  width: 32px;
  height: 32px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="app"></div>
<div class="activator">Click me</div>

＆＃13;

如果是jQuery动画，你可以使用其中一个回调选项，比如complete，或者将回调函数作为最后一个参数传递。

jQuery("div").animate({width:"500"},{
    complete:function(){
        $('.app').css('background', $(this).css('background'));
    }
});
//Or
jQuery("div").animate({width:"500"},function(){
    $('.app').css('background', $(this).css('background'));
});

Answer 2

用于延迟操作的JavaScript内置函数Spring Boot 2.0 migration guide。

Answer 3

您可以使用.delay()功能延迟功能，如下所示：

$(function() {
  $('.activator').on('click', function() {
    $(this).toggleClass('animated').delay(400); // delay 400ms = 0.4s, change to any thing
    $('.app').css('background',$(this).css('background'));
  });
})

您可以在调用后想要延迟的任何函数旁边添加，因此上面的代码将执行第一行，延迟400ms然后执行第二行。

Answer 4

您是否尝试在动画前使用.delay（）？

$(this).delay(500).toggleClass('animated');

jQuery单击多个动作

4 个答案: