阻止其他功能在選擇功能后運行

Question

我有一個div #imageSwap和三個按鈕＃button1，＃button2，＃button3。 前兩個按鈕更改div的HTML以保存特定圖像，第三個按鈕開始旋轉多個圖像。

由於某些原因，當單擊第三個（旋轉）按鈕時，它運行良好，但是當在第三個按鈕之后單擊第一個或第二個按鈕時，動畫在不應該運行時運行。

<script language="javascript" type="text/javascript">

$(document).ready(function () {
  setImageOne();
  $('#button1').addClass('selected');     


  $("a#button1").click(function() {

       setImageOne();           
          $(this).addClass('selected');
          $('#button2').removeClass('selected');
          $('#button3').removeClass('selected');
      });

  $("a#button2").click(function() {

       commObj();
          $(this).addClass('selected');
          $('#button1').removeClass('selected');
          $('#button3').removeClass('selected');
      });

  $("a#button3").click(function() {

           comProg();
          $(this).addClass('selected');
          $('#button1').removeClass('selected');
          $('#button2').removeClass('selected');
       });
 });

function setImageOne() {
  $('#imageSwap').fadeIn(500).html('<img src="slide1.png" />');   
}


function commObj() {
  $('#imageSwap').fadeIn(500).html('<img src="co.png" />');
}


function comProg() {
  $('#imageSwap').fadeIn(500).html('<img src="bo2.png" />').delay(2000).fadeOut(500, function () { comProg2(); });
}
function comProg2() {
  $('#imageSwap').fadeIn(500).html('<img src="bo2.png" />').delay(2000).fadeOut(500, function () { comProg3(); });
}
function comProg3() {
  $('#imageSwap').fadeIn(500).html('<img src="bo2.png" />').delay(2000).fadeOut(500, function () { comProg4(); });
}
function comProg4() {
  $('#imageSwap').fadeIn(500).html('<img src="bo2.png" />').delay(2000).fadeOut(500,           function () { comProg(); });
}

</script>

Answer 1

那是因為您所有的comProg函數都有一個調用comProg函數的回調函數，因此動畫將每2秒運行一次。

而且，您可以編寫comProg2而不是function () { comProg2(); } function () { comProg2(); }盡管您所有的comProg函數都相同，但是您可以只使用一個函數並使用回調函數來調用相同的函數，而不是使用下一個執行相同功能的函數...

Answer 2

查看jquery動畫隊列http://api.jquery.com/queue/

Answer 3

添加類似

$('#imageSwap').clearQueue();

在按鈕1和按鈕2的回調處理程序中停止無休止的動畫。

請參閱http://api.jquery.com/clearQueue/