jquery 핸들을 여러 번 클릭하면

Question

jquery 라이브러리를 사용하여 내 js 코드에서 내 웹 페이지의 자체 슬라이더 애니메이션을 만들려고합니다. 그 함수에서 하나의 함수가 있습니다. 설정 한 매개 변수가있는 애니메이션 메서드를 사용하여 DOM 요소를 이동했습니다. 애니메이션을 원한다면 setInterval을 사용하여 자동 반복을 호출 할 때 잘 작동하지만 여러 번 연속해서 다음 또는 이전 버튼을 클릭하면 계속 슬라이드 함수를 호출하여 얼마나 많은 시간을 클릭 하는지를 지속적으로 호출하는 방법으로 css 및 dom 요소를 축소합니다.

: 내 슬라이더 추한 :(는 친절 친절 필요한

클릭 이벤트를 도와, 내가 검색을 시도하고 내가 그 문제를 방지 할 수있는 방법 좀 도와 그 해결책을 얻을,하지만 난 솔루션을 얻을 수 없다

$(".health-plan-slider .next").stop().click(function(){ 

      var ele_n = $(".health-plan-slider .next").attr("data-next"); 
      slideEffectNext(ele_n); 


     }); 

기능 :

function slideEffectNext(dataVal) 
    { 
     dataVal = parseInt(dataVal); 
     var dataValPrev = parseInt(dataVal) - 1; 
     if(dataVal == ele_len-1) 
     { 
      $(".health-plan-slider .next").attr("data-next",0); 
     } 
     else 
     { 
      $(".health-plan-slider .next").attr("data-next", dataVal+1); 
     } 
     if(dataVal == 0) 
     { 
      $(".health-plan-slider .prev").attr("data-prev", ele_len-1); 
     } 
     else 
     { 
      $(".health-plan-slider .prev").attr("data-prev", dataVal-1); 
     } 
     $(".slider-wrap .slide-elements").removeAttr("data-cur"); 
     $(".slider-wrap .slide-elements").eq(dataVal).css("left", "920px"); 
     $(".slider-wrap .slide-elements").eq(dataValPrev).animate({ left:-920+"px"}, 1000, function() { $(".slider-wrap .slide-elements").eq(dataValPrev).css("left",920+"px");}); 
     $(".slider-wrap .slide-elements").eq(dataVal).animate({ left:0+"px"}, 1000).attr("data-cur", 1); 
    } 

사전 감사

Answer 1

사용

.stop() 

애니메이션을 $에 대한

$('#next').stop().click(function() { 
    // your animation .. 
}) 

같은 각 사용자가 다음에 클릭 시간 또는 이전 ('#을 중지 이전 ')

Answer 2

이 논리 코드의

$(".health-plan-slider .next").click(function(){ 
    if(typeof sliding != "undefined" && sliding){ 
     var ele_n = $(".health-plan-slider .next").attr("data-next"); 
     slideEffectNext(ele_n); 
    } 
}); 


function slideEffectNext(dataVal){ 
    sliding = true; 
    dataVal = parseInt(dataVal); 
    var dataValPrev = parseInt(dataVal) - 1; 
    if(dataVal == ele_len-1) 
    { 
     $(".health-plan-slider .next").attr("data-next",0); 
    } 
    else 
    { 
     $(".health-plan-slider .next").attr("data-next", dataVal+1); 
    } 
    if(dataVal == 0) 
    { 
     $(".health-plan-slider .prev").attr("data-prev", ele_len-1); 
    } 
    else 
    { 
     $(".health-plan-slider .prev").attr("data-prev", dataVal-1); 
    } 
    $(".slider-wrap .slide-elements").removeAttr("data-cur"); 
    $(".slider-wrap .slide-elements").eq(dataVal).css("left", "920px"); 
    $(".slider-wrap .slide-elements").eq(dataValPrev).animate({ left:-920+"px"}, 1000, function() { $(".slider-wrap .slide-elements").eq(dataValPrev).css("left",920+"px");}); 
    $(".slider-wrap .slide-elements").eq(dataVal).animate({ left:0+"px"}, 1000,function(){sliding = false;}).attr("data-cur", 1); 
}