class fadeIn問題

Question

以下腳本在停止之前會多次使類「closeBox」發fadin（如某種動畫）。我只需要它將它淡入一次。

.box-holder div{ 
    background-color:#CCC; 
    width:240px; 
    height:240px; 
    position:absolute; 
    top:0; 
    cursor:pointer; 
} 

.closeBox{ 
    display:none; 
    margin: 0; 
    position: absolute; 
    right: 10px; 
    top: 10px; 
} 

.box-1{ 
    right:600px; 
} 

.box-2{ 
    right:310px; 
} 

.box-3{ 
    right:20px; 
} 
     <div class="box-holder" > 
      <div class="box-1" 
      data--50-top="right:600px;" 
      data--300-top="right: -570px;" 
      data-anchor-target="#slide-1 h2" 
      ></div> 
      <div class="box-2" 
      data--50-top="right:310px;" 
      data--300-top="right: -570px;" 
      data-anchor-target="#slide-1 h2" 
      ></div> 
      <div class="box-3" 
      data--50-top="right:20px;" 
      data--300-top="right: -570px;" 
      data-anchor-target="#slide-1 h2" 
      ><p class="closeBox">X</p></div> 
     </div> 

     $(document).ready(function(e) { 

      var scrolling = $window.scrollTop(); 

      function update(){ 
       var boxHolderDivRight = $('.box-holder div').css('right'), 
        boxHolder = $('#slide-1 .box-holder'), 
        boxHolderDiv = $('.box-1, .box-2, .box-3'), 
        closeBox= $('.closeBox'); 

        boxHolderDiv.click(function(){ 
         if(boxHolderDiv.css('right') == -570+'px'){ 
          boxHolderDiv.addClass('clicked'); 
          closeBox.fadeIn(); 
         } 
         else if(boxHolderDiv.css('right') == -300+'px' && boxHolderDiv.hasClass('clicked')){ 
          boxHolderDiv.removeClass('clicked'); 
          closeBox.fadeOut(); 
         } 
        }); 


      } 

      $window.bind('scroll', update);// JavaScript Document 

     }); 

Answer 1

在另一個事件處理程序中綁定一個事件處理程序通常是錯誤的，因爲除非您先小心刪除舊事件，否則您將獲得多個事件綁定。你應該在頂層綁定第二個處理程序一次。如果它需要依賴於第一個處理程序中的某些內容，請讓第一個處理程序設置第二個處理程序檢查的變量。如果您的第一個處理程序動態創建元素或移動類，則可以使用.on()的委派讓處理程序自動遵循這些更改。如果您只想啓用和禁用單擊輸入元素，則可以添加和刪除其disabled屬性。但是，如果隱藏元素，則不需要這樣做 - 用戶無法點擊他們看不到的內容。

Answer 2

你是綁定對象多次，看來。您應該在重新綁定之前執行.unbind點擊事件。