Jquery 슬라이더, 스팸 클릭하면 내 슬라이더가 깨집니다.

Question

왼쪽 또는 오른쪽 화살표로 이동이 완료 될 때까지 화살표에서 클릭을 무시하도록 슬라이더를 만드는 방법에 대한 답변이나 조언을 찾고 있습니다.

나는 무슨 일이 일어나고 있는지 정확히 알려주기 위해 여기 링크가 있습니다.

http://madaxedesign.co.uk/dev/index/

아래 jQuery 코드 : 애니메이션이 실행되는 경우

$(document).ready(function() { 

    var nav = $('div.slider').css('overflow', 'hidden').children('ul'), 
    ul = $('#container .slider ul'), 
    count = $('#container .slider ul li').length, 
    width = count * 854;  

    $('#container .slider ul').width(width); 

function slideRight() { 
     ul.animate({ 
      left: '0' 
     }, 1000); 
    } 

    function moveRight() { 
     $('#container .slider ul li:first').insertBefore($('#container .slider ul li:last'));   
     ul.css("left", "-854px"); 
    } 

    function slideLeft() { 
     ul.animate({ 
      left: '-=854' 
     }, 1000, function() { 
      $('#container .slider ul li:first').appendTo(ul);   
      ul.css("left", "0"); 
     }); 
    } 

    var autoSlide; 

    autoSlide = setInterval(function() { 
     slideLeft(); 
    }, 3000); 

    $('#container .slider_container').mouseenter(function() { 
     clearInterval(autoSlide); 
    }).mouseleave(function() { 
     autoSlide = setInterval(function() { 
      slideLeft(); 
     }, 3000); 
    }); 

    $('#slider-nav').show(); 

    $('#slider-nav .left_arrow').click(function(slideLeft){ 
     event.stopPropagation(); 
    }); 

    $('#slider-nav .right_arrow').click(function() { 
     moveRight(); 
     slideRight().delay(200); 
    }); 
}); 

Answer 1

트릭은 현재 슬라이딩하고, 단지 실행 여부를 알려줍니다 변수를 유지하는 것입니다 ... 문제는 slideRight() 아무것도 반환하지 않습니다 생각 슬라이딩 기능이 있다면 false입니다. 그런 다음 슬라이딩 함수가 실행될 때 true으로 설정하고 콜백에 false로 설정하도록 지시합니다. 나는 아래의 코드에서 변수 sliding라고했습니다 귀하의 질문에

$(document).ready(function() { 
    // Flag to test on trigger 
    var sliding = false; 

    var nav = $('div.slider').css('overflow', 'hidden').children('ul'), 
    ul = $('#container .slider ul'), 
    count = $('#container .slider ul li').length, 
    width = count * 854;  

    $('#container .slider ul').width(width); 

function slideRight() { 
     // Stop the function if we're already sliding 
     if(sliding){ 
      return false; 
     } 

     // And now we're sliding 
     sliding = true; 

     ul.animate({ 
      left: '0' 
     }, 1000, function(){ 
      // Slide over! 
      sliding = false; 
     }); 
    } 

    function moveRight() { 
     $('#container .slider ul li:first').insertBefore($('#container .slider ul li:last')); 
     ul.css("left", "-854px"); 
    } 

    function slideLeft() { 
     // Stop the function if we're already sliding 
     if(sliding){ 
      return false; 
     } 

     // And now we're sliding 
     sliding = true; 
     ul.animate({ 
      left: '-=854' 
     }, 1000, function() { 
      // Slide over! 
      sliding = false; 

      $('#container .slider ul li:first').appendTo(ul); 
      ul.css("left", "0"); 
     }); 
    } 

    var autoSlide; 

    autoSlide = setInterval(function() { 
     slideLeft(); 
    }, 3000); 

    $('#container .slider_container').mouseenter(function() { 
     clearInterval(autoSlide); 
    }).mouseleave(function() { 
     autoSlide = setInterval(function() { 
      slideLeft(); 
     }, 3000); 
    }); 

    $('#slider-nav').show(); 

    $('#slider-nav .left_arrow').click(function(slideLeft){ 
     event.stopPropagation(); 
    }); 

    $('#slider-nav .right_arrow').click(function() { 
     moveRight(); 
     slideRight().delay(200); 
    }); 
}); 

Answer 2

사용 :animated selector 확인하기.

$('#slider-nav .right_arrow').click(function() { 
    if(ul.is(":animated")) return; 
    ... 
}); 

Answer 3

나는

function slideRight() { 
    return ul.animate({ 
     left: '0' 
    }, 1000); 
}