[英]How to wait until a loop of jquery effects are finished before executing function
[英]jQuery: How to wait until fadeTo(or any other effect) finishes before executing code
我正在制作一个新闻板,淡入淡出新闻。 当元素淡出时,内容将被删除,而当元素淡出时,其位置将包含新内容。 这是可行的,只是时间到了。 仅当旧内容淡出后才应显示的新内容会随着元素的褪色而出现。 有没有办法等到完成?
$(document).ready(function() {
var counter = 0;
var slides = ['<p>Track All of Your enemys Using The <span>Scout Tool!</span></p>',
'<p>Download powerups Using The <span>Pirate Tool!</span></p>',
'<p>Gather Badges To Attack others in <span>Raids!</span></p>',
'<p>Enjoy Orgainzing Your Profile <span>Join Now!</span></p>'];
$('#slide-left').click(function() {
$('#slide').fadeTo('fast', 0);
$('#slide p').remove();
if (counter > 0){counter --;}
$('#slide').append(slides[counter]);
$('#slide').fadeTo('fast', 1);
});
$('#slide-right').click(function() {
$('#slide').fadeTo('fast', 0);
$('#slide p').remove();
if (counter < (slides.length-1)){counter ++;}
$('#slide').append(slides[counter]);
$('#slide').fadeTo('fast', 1);
});
});
fadeTo接受第三个参数,即回调函数 。 动画完成时将调用此方法。 因此,您始终可以执行以下操作:
$('#slide').fadeTo('fast', 1, function() {
// This part is executed after fade
});
你可以做
$('#slide').fadeTo('fast', 0,function(){
$('#slide p').remove();
if (counter > 0){counter --;}
$('#slide').append(slides[counter]).fadeTo('fast', 1);
});
$(document).ready(function() {
var counter = 0;
var slides = ['<p>Track All of Your enemys Using The <span>Scout Tool!</span></p>',
'<p>Download powerups Using The <span>Pirate Tool!</span></p>',
'<p>Gather Badges To Attack others in <span>Raids!</span></p>',
'<p>Enjoy Orgainzing Your Profile <span>Join Now!</span></p>'];
$('#slide-left').click(function() {
$('#slide').fadeTo('fast', function() {
$('#slide p').remove();
if (counter > 0){
counter --;
}else{
if (counter < (slides.length-1)){
counter ++;
}
}
$('#slide').append(slides[counter]);
$('#slide').fadeTo('fast', 1);
});
});
});
我不知道这是正确还是错误,但我的5条消息:
希望我有所帮助,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.