函數使用jQuery循環插件綁定到回調前發射兩次

Question

我正在使用jQuery Background Position插件和jQuery Cycle插件嘗試在幻燈片滾動的同時創建滑塊和背景圖像的動畫。下面是我到目前爲止的例子：

HTML

<div class="container"> 
    <div class="slider"> 
     <div class="pane"> 
      Text asd dddsa sadsad 
     </div> 
     <div class="pane"> 
      Text asd dddsa sadsad 
     </div> 
     <div class="pane"> 
      Text asd dddsa sadsad 
     </div>   
    </div> 
    <a href="#" id="prev-slide">&lt; Prev</a> 
    <a href="#" id="next-slide">Next &gt;</a> 
</div>​ 

JS

$(function() { 
    // Animate background when clicking slider arrows 
    $('#prev-slide').on('click', function(event) { 
     event.preventDefault(); 
     slideBgForward(); 
    }); 

    $('#next-slide').on('click', function(event) { 
     event.preventDefault(); 
     slideBgBackward(); 
    }); 

    $('.slider').cycle({ 
     fx : 'scrollHorz', 
     next : '#next-slide', 
     prev : '#prev-slide', 
     before : function(currSlideElement, nextSlideElement, options, forwardFlag) { 
      if (forwardFlag) { 
       slideBgBackward(); 
      } else { 
       slideBgForward(); 
      }     
     }    
    }); 

    // Slide background forwards 
    function slideBgForward() { 
     $('.container').animate({ 
      backgroundPosition: '-=20% 0' 
     }, 1500); 
    } 

    // Slide background backwards 
    function slideBgBackward() { 
     $('.container').animate({ 
      backgroundPosition: '-=20% 0' 
     }, 1500); 
    } 
});​ 

http://jsfiddle.net/vengiss/gshtZ/

如果我本身離開滑塊滾動它按預期工作，但是如果我點擊下一個/ prev鏈接來移動滑動背景動畫兩次幻燈片，我相信這是因爲滑動功能被稱爲鏈接被點擊時，並befor e幻燈片開始滾動。有沒有辦法讓它只滾動一次？

在此先感謝。

Answer 1

我覺得你的問題是，你問('.slider').cycle()處理您next和prev，和你也問jQuery來處理他們太 - 每做你問什麼，正因爲如此，你的背景動畫兩次。

我會試圖去除/禁用$('#next-slide').on('click')和$('#prev-slide').on('click')，看看會發生什麼。