如何确保 .animate 在再次执行之前已完成
How can I make sure .animate has finished before performing again
我有一些滑动图像,我正在使用.animate移动。当我单击箭头再次前进时,幻灯片都搞砸了。
这是正在发生的事情的链接。http://leadgenixhosting.com/~intmed/
这是我到目前为止拥有的js:
$(document).ready(
function(){
$('#mast').hover(
function(){
$('#out-right').hide().attr('src','');
$('#in-right').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/on_03.gif');
$('#out-left').hide().attr('src','');
$('#in-left').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/on_07.gif');
},
function(){
$('#in-right').hide().attr('src','');
$('#out-right').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/off_03.gif');
$('#in-left').hide().attr('src','');
$('#out-left').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/off_07.gif');
}
);
/*Picture Setup
-------------------------------------------------*/
var gallery_images = [];
var divs = ['one','two','three','four'];
$('#image_container img').each(
function(){
gallery_images[gallery_images.length] = $(this).attr('src');
$(this).hide();
}
);
$('#'+divs[0]+'').css('background-image','url('+gallery_images[0]+')');
var total_images = gallery_images.length;
//Images
var current = 0;
//Divs
var current_image = 0;
var previous_image = divs.length - 1;
var two_prev = divs.length - 2;
var next = current_image + 1;
/*Image Switch
-------------------------------------------------*/
function imageSwitch(){
current++;
current_image++;
previous_image++;
next++;
two_prev++
if(two_prev >= divs.length){
two_prev = 0;
}
if(current >= gallery_images.length){
current = 0;
}
if(previous_image >= divs.length){
previous_image = 0;
}
if(current_image >= divs.length){
current_image = 0;
}
if(next >= divs.length){
next = 0;
}
$('#'+divs[current_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000})
$('#'+divs[current_image]+'').css('background-image','url('+gallery_images[current]+')');
$('#'+divs[previous_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000});
$('#'+divs[next]+'').animate({left: '+=1020px', top: '-=10000px'}, 1000);
$('#'+divs[two_prev]+'').animate({left: '+=1020px', top: '+=10000px'}, 1000);
}
function imageBack(){
current--;
current_image--;
previous_image--;
next--;
two_prev--;
if(two_prev < 0){
two_prev = divs.length - 1;
}
if(current < 0){
current = divs.length - 1;
}
if(previous_image < 0){
previous_image = divs.length - 1;
}
if(current_image < 0){
current_image = divs.length - 1;
}
if(next < 0){
next = divs.length - 1;
}
$('#'+divs[current_image]+'').animate({left:'+=1020px'},{queue:false,duration:1000});
$('#'+divs[current_image]+'').css('background-image','url('+gallery_images[current]+')');
$('#'+divs[previous_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000});
$('#'+divs[next]+'').animate({left: '-=1020px', top: '+=10000px'}, 1000);
$('#'+divs[two_prev]+'').animate({left:'-=1020px'},{queue:false,duration:1000});
}
/*Image Buttons
----------------------------------------*/
$('#in-right').click(
function(){
imageSwitch();
}
);
$('#in-left').click(
function(){
imageBack();
}
);
}
);
API: .stop
http://api.jquery.com/stop/
停止匹配元素上当前运行的动画。
就像@ahren提到的,如果你热衷于阅读这些内容,你可以使用一个简单的条件检查is(":animated")
:
http://api.jquery.com/animated-selector/
您将在这里找到实现:jquery is(":visible") 和 is(":animated") 在动画过程中出现错误?
$('#element').animate({..properties..}, time_interval, function() {
// When here, you know that animate has finished
});
相关文章:
- 在动态crm 2011中,右键单击已完成活动的只读文本时,您是否出现错误
- 检查jquery(或ajax)功能是否已完成
- 如何检测我的音频流是:正在播放、暂停还是已完成
- 如何确保 .animate 在再次执行之前已完成
- 回流如何侦听异步操作已完成
- 检查浏览器是否已完成页面加载
- 复选框,将所有已完成的输入字段复制到下面的字段
- 最后一个图像已完成淡入
- 测试规范在$rootScope之前执行$apply()已完成对promise的解析
- 如何检查AJAX请求是否已完成
- 在继续之前,请确保异步GET/POST请求已完成
- angular won't显示范围变量(已完成)
- 如何查找是否所有 ajax 请求都已完成,并且每个请求都使用 Javascript 和/或 JQuery 将数据从服务器
- jQuery:如何检查以确保所有异步操作都已完成
- 如何确保所有 ajax 调用都已成功执行(未完成)
- 检查 URL 是否已完成加载
- 流星 - 创建一个复选框,用于隐藏会话中已完成的决议
- 触发器成功处理程序已完成执行,其中包含嵌套的 ajax 请求
- 当执行多个吞咽流时,如何将吞咽任务标记为已完成
- 通过文档注入脚本后执行函数.写入已完成加载