創建動畫圖像滑塊 - 如何動畫和限制多次點擊？

Question

我已經花了幾天的時間在一個產品頁面的圖像滑塊上工作，並且我已經設法構建了我認爲足夠滿意的滑塊，但是我想添加的最後一個接觸不是從一個圖像到下一個圖像的靜態移動，您會看到一個物理滑動動畫，我遇到的唯一問題是它允許多次點擊，這意味着這些值完全被拋出，並且會被打破。我想知道如何檢查一個函數何時運行，以便它不能再運行，直到它完成，或者我想也許我可以使用.finish（），以便用戶不會被迫等待動畫在每次點擊之前完成，因此如果他們想要快速滾動，它會將先前的動畫趕到最終值。

這是（當前）工作滑塊的jsfiddle鏈接。

如果在第12行和第24行上將.css（）更改爲.animate（），則會在箭頭上單擊多次時看到我遇到的問題。

HTML

<div id="imageSlider"> 
    <div id="imagesContainer"> 
     <div class="left imagePane" id="selectedImage"> 
      <div class="sliderImageAlign"> 
       <p style="height: 100px; width: 75px; line-height: 100px; text-align: center;">1</p> 
      </div> 
     </div> 

     <div class="left imagePane"> 
      <div class="sliderImageAlign"> 
       <p style="height: 100px; width: 75px; line-height: 100px; text-align: center;">2</p> 
      </div> 
     </div> 

     <div class="left imagePane"> 
      <div class="sliderImageAlign"> 
       <p style="height: 100px; width: 75px; line-height: 100px; text-align: center;">3</p> 
      </div> 
     </div> 

     <div class="left imagePane"> 
      <div class="sliderImageAlign"> 
       <p style="height: 100px; width: 75px; line-height: 100px; text-align: center;">4</p> 
      </div> 
     </div> 

     <div class="left imagePane"> 
      <div class="sliderImageAlign"> 
       <p style="height: 100px; width: 75px; line-height: 100px; text-align: center;">5</p> 
      </div> 
     </div> 
    </div> 

    <div id="imagesUp"> 
     <div id="imagesArrowUp"></div> 
    </div> 

    <div id="imagesDown"> 
     <div id="imagesArrowDown"></div> 
    </div> 
</div> 

jQuery的

$(document).ready(function() { 
    var imageHeight = $("#selectedImage").height(), 
     containerHeight = $("#imagesContainer").height(), 
     imageSliderHeight = $("#imageSlider").height() - ($("#imagesDown")[0].offsetHeight + $("#imagesUp")[0].offsetHeight); 

    $("#imagesDown").on('click', function() { 
     if (containerHeight > imageSliderHeight) { 
      var containerPos = $("#imagesContainer").position().top, 
       containerNewPos = containerPos - imageHeight; 

      if (imageSliderHeight < (containerHeight + containerPos)) { 
       $("#imagesContainer").css({ 
        top: containerNewPos + 'px' 
       }, 800); 
      } 
     } 
    }); 

    $("#imagesUp").on('click', function() { 
     var containerPos = $("#imagesContainer").position().top, 
      containerNewPos = containerPos + imageHeight; 

     if (containerNewPos < imageHeight) { 
      $("#imagesContainer").css({ 
       top: containerNewPos + 'px' 
      }, 800); 
     } 
    }); 
}); 

CSS

* { 
    color: RGB(0, 0, 0); 
    font: 14px Arial; 
    margin: 0; 
    padding: 0; 
    text-decoration: none; 
} 

.left { 
    float: left; 
} 

.right { 
    float: right; 
} 

#imageSlider { 
    border: 1px solid RGB(0, 0, 0); 
    box-shadow: 0px 0px 10px RGB(200, 200, 200); 
    float: left; 
    height: 450px; 
    margin-right: 20px; 
    overflow: hidden; 
    position: relative; 
    width: 87px; 
} 

#imagesContainer { 
    position: absolute; 
    top: 35px; 
    width: 100%; 
} 

#imagesUp, 
#imagesDown { 
    background: RGB(20, 100, 150); 
    box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
    height: 35px; 
    position: absolute; 
    width: 100%; 
} 

#imagesUp { 
    border-bottom: 1px solid RGB(0, 0, 0); 
    top: 0; 
} 

#imagesDown { 
    border-top: 1px solid RGB(0, 0, 0); 
    bottom: 0; 
} 

#imagesArrowUp, 
#imagesArrowDown { 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    margin: 0 auto; 
    margin-top: 10px; 
    height: 0; 
    width: 0; 
} 

#imagesArrowUp { 
    border-bottom: 15px solid RGB(200, 230, 240); 
} 

#imagesArrowDown { 
    border-top: 15px solid RGB(200, 230, 240); 
} 

#selectedImage { 
    background: RGBA(20, 100, 150, 0.4); 
} 

.sliderImageAlign { 
    border: 1px solid RGB(0, 0, 0); 
    height: 100px; 
    margin: 5px; 
    width: 75px; 
} 

Answer 1

只是檢查，如果你是元素還是MOVI當您點擊jQuery :animated僞類時，例如通過這種方式，

$("#imagesUp").on('click', function() { 
    var ic = $("#imagesContainer"); 
    ... 

    if (ic.is(':not(:animated)') && containerNewPos < imageHeight) { 
     ic.animate({ 
       top: containerNewPos + 'px' 
     }, 800); 
    } 
}); 

這樣做只有先前的動畫已經完成，動畫纔有可能。

您也可以檢查該條件作爲處理程序中的第一條語句，並根據您的方便移動該語句中的所有必要邏輯。

作爲一個旁註，我建議重構你的代碼，緩存一個對移動元素的引用，並使用一個事件處理函數，用於imageUp和imageDown元素，因此你可以計算新的頂部屬性（和條件來運行動畫）僅查看點擊元素的id屬性。