jQuery单击多个动作

时间:2016-08-28 22:13:16

标签: javascript jquery css animation

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

示例是:

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

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

谢谢!

4 个答案:

答案 0 :(得分:4)

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

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

演示



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

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

<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;
&#13;
&#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'));
});

答案 1 :(得分:1)

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

答案 2 :(得分:0)

您可以使用.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然后执行第二行。

答案 3 :(得分:-1)

您是否尝试在动画前使用.delay()?

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