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

的竅門是保持一個變量，它會告訴你你是否目前正在滑動，並且只執行滑動功能，如果它是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

我覺得你的問題是slideRight()不返回任何東西......

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