我想使用jQuery来实现多种效果。当用户单击某个元素时,它会调用该单击处理程序中的一组函数。 jQuery中有没有办法在函数中执行的每个动作之间有延迟?
示例是:
$(function() {
$('.activator').on('click', function() {
$(this).toggleClass('animated');
$('.app').css('background',$(this).css('background'));
});
})
不是让激活元素执行它从类接收的动画,然后接收背景的应用程序,它们都发生在同一时间,甚至看不到动画。如何设置两者之间的延迟,或多个?
谢谢!
答案 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;
如果是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');