禁用链接，直到所有动画停止，然后再次启用它们

Disable links till all animations stop and enable them again

本文关键字：然后 启用 动画 链接      更新时间：2023-09-26

我有一个像动画一样的图像滑块，区别在于一张幻灯片中有几个元素，在我的例子中，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');
});

如果您只是想确保在动画时不会单击链接，请将其添加到您的单击中。

$('.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，其中类以取自'_img1').attr("rel");的"img1"结尾

将您的网站复制到 Fiddle 并让它与我在这里提到的更改一起工作

相关文章：