Отключить ссылки до тех пор, пока все анимации не остановятся и не активируют их снова

Question

У меня есть слайдер изображения, как анимация, различия в том, что в одном слайде есть несколько элементов, в моем случае 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'); 

}); 

Answer 1

если вы просто пытаетесь, чтобы убедиться, ссылка не нажата в то же время анимации добавить к вашей мыши.

$('.package_box_menu li').children().click(function(){ 
    if($('img[class$=img1]').is(':animated')) { 
     event.preventDefault(); 
     return false; 
    } 

    $(this).showProducts($(this).attr("id")); 

}); 

Это будет просто отказаться от щелчка при его анимировании, а затем работать, когда он остановится. $ (это) можно было бы заменить чем-то, что анимируемого например, ваш слайд :)

NOTE

Как нет HTML показано, я должен был сделать некоторые предположения на селекторе я использовал " IMG [класс $ = img1]», который является IMG, когда класс заканчивается в„img1“взяты из '_img1').attr("rel");

скопированного ваш сайта Fiddle и получил его работу с изменением я упоминаю here