我正在使用一些jQuery效果更新我的客户端的Web画廊。我已经做了一些成功的更改,但现在我的最终脚本出现了问题。一切都工作正常,但是当你开始快速点击时,动画会破坏常规模式,一切都很糟糕。我知道我需要使用stop()函数,但我不能让它100%正常工作。
$(function () {
$(".gallery_view_switch").toggle(function () {
$(this).html('Switching ...');
$(".sidebar").slideToggle('slow', function () {
$(".single_page").animate({width: 870}, 700),
$('img.gallery').css('margin-left', '5px'),
$('#top').css('margin-right', '-290px'),
$('.gallery_view_switch').html('Show gallery navigation');
});
},function () {
$(this).html('Switching ...');
$('img.gallery').css('margin-left', '12px'),
$(".single_page").animate({width: 550}, 700, function () {
$('#top').css('margin-right', '30px'),
$(".sidebar").slideToggle('slow'),
$('.gallery_view_switch').html('Hide gallery navigation');
});
});
})
因此,我们在这里进行了“点击”操作,带有图库导航的侧边栏上升,内容获得了额外的尺寸和图片的新CSS属性,因此图库现在具有更宽的视图。
第二次点击时,内容会获得原始尺寸和属性,侧边栏会切换回原始位置。
我在这里要做的是停止动画队列以获得额外的点击,而不是在所有内容都准备就绪之前允许新的动画发生。
谢谢!
编辑2:
$(function () {
var isExpanding = false;
$(".gallery_view_switch").toggle(function () {
if(!isExpanding) {
$(this).html('Switching ...');
$(".sidebar").slideToggle('slow', function () {
isExpanding = true;
$(".single_page").animate({
width: 870
}, 700),
$('img.gallery').css('margin-left', '5px'),
$('#top').css('margin-right', '-290px'),
$('.gallery_view_switch').html('Show gallery navigation');
isExpanding = false;
});
}
},function () {
if(!isExpanding) {
$(this).html('Switching ...');
$('img.gallery').css('margin-left', '12px'),
$(".single_page").animate({
width: 550
}, 700, function () {
isExpanding = true;
$('#top').css('margin-right', '30px'),
$(".sidebar").stop().slideToggle('slow'),
$('.gallery_view_switch').html('Hide gallery navigation');
isExpanding = false;
});
}
});
})
另一个编辑,仍然无法正常工作......我真的不明白我到底需要做些什么才能让它发挥作用?我尝试了这么多真/假的组合,没有成功,它正如以前一样工作,重叠。或者在某些真/假组合中,它完全锁定,一旦展开就无法返回。
答案 0 :(得分:1)
在动画功能上使用.stop():
$(function () {
$(".gallery_view_switch").toggle(function () {
$(this).html('Switching ...');
$(".sidebar").stop().slideToggle('slow', function () {
$(".single_page").stop().animate({width: 870}, 700),
$('img.gallery').css('margin-left', '5px'),
$('#top').css('margin-right', '-290px'),
$('.gallery_view_switch').html('Show gallery navigation');
});
},function () {
$(this).html('Switching ...');
$('img.gallery').css('margin-left', '12px'),
$(".single_page").stop().animate({width: 550}, 700, function () {
$('#top').css('margin-right', '30px'),
$(".sidebar").stop().slideToggle('slow'),
$('.gallery_view_switch').html('Hide gallery navigation');
});
});
})
答案 1 :(得分:0)
我会像这样做以防止双重事件:
$(function () {
var isExpanding = false;
$(".gallery_view_switch").toggle(function () {
if(!isExpanding) {
//stuff
$(".sidebar").slideToggle('slow', function () {
isExanding = true;
//Do your stuff
isExpanding = false;
});
}
},function () {
if(!isExpanding) {
$(".single_page").animate({width: 550}, 700, function () {
isExanding = true;
//Do your stuff
isExpanding = false;
});
}
});