모든 애니메이션이 멈추고 다시 활성화 될 때까지 링크를 비활성화하십시오.

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")); 

}); 

이것은 움직이는 동안 클릭을 거부하고 멈출 때 작동합니다. 내가 '사용 선택에 대한 몇 가지 가정을했다 표시에는 HTML이 없기 때문에 $ (이) 예 슬라이드 :

참고

에 대한 애니메이션을 무언가로 대체 할 수있다 바이올린 사이트 복사 '_img1').attr("rel");

에서 촬영을 img1 '하고 내가 here