我有一个像动画一样的图像滑块,不同之处在于,在一张幻灯片中有几个元素,在我的例子中是4张来自场景左侧或右侧的图片。
问题是如何在动画完成100%之前使触发动画功能的链接被禁用,然后再次启用。
这是我的代码......
$(document).ready(function() {
//
$('.package_box_menu li').children().click(function(){
$(this).showProducts($(this).attr("id"))
});
jQuery.fn.showProducts = function (clickedSeason) {
var nextToShowSide = $('.'+[clickedSeason]+'_img1').attr("rel");
var active = $('img[ rel |= active]').attr('season');
if (nextToShowSide == 'right') {var whereTo = '-1000px'; var currentToHideSide ="left" };
if (nextToShowSide == 'left') {var whereTo = '3000px'; var currentToHideSide ="right" };
show();
hide(active, whereTo, currentToHideSide);
function show(){
var allToShow = ($('img[ season |= '+[clickedSeason]+']').get()).length;
for (var i = 1; i<= allToShow ; i++){
var delay = $('.'+[clickedSeason]+'_img'+[i]).attr('delay');
var position = $('.'+[clickedSeason]+'_img'+[i]).attr('left');
$('.'+[clickedSeason]+'_img'+[i]).stop().delay(delay).animate({'margin-left': position }, 1000, 'easeOutExpo').attr('rel','active');
}
};
function hide(active, whereTo, currentToHideSide){
var all = ($('img[ rel |= active]').get()).length;
for (var i = 1; i<= all ; i++){
if ($('.'+[active]+'_img'+[i]).attr('rel') == 'active') {
$('.'+[active]+'_img'+[i]).stop().delay([i]+'00').animate({'margin-left': whereTo }, 1000, 'easeInExpo').attr('rel', currentToHideSide );
}
}
};
};
jQuery().showProducts('spring');
});
答案 0 :(得分:1)
如果您只是想确保在动画时未点击链接,请将其添加到您的点击中。
$('.package_box_menu li').children().click(function(){
if($('img[class$=img1]').is(':animated')) {
event.preventDefault();
return false;
}
$(this).showProducts($(this).attr("id"));
});
这只是在动画时拒绝点击,然后在停止时工作。 $(this)可以替换为动画的内容,例如幻灯片:)
注意强>
由于没有显示HTML,我必须对选择器做一些假设我使用'img [class $ = img1]'这是一个img,其中类以'{1}} <取自'img1'结束/ p>
将您的网站复制到Fiddle并让其使用我提到的更改here