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(); }尽管所有的comProg函数都是相同的，你可以使用一个函数并使用一个调用相同函数而不是下一个函数的回调函数同样的事情......

Answer 2

检查jquery动画队列http://api.jquery.com/queue/

Answer 3

添加类似

的内容

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

在按钮1和按钮2的回调处理程序中停止无限动画。

请参阅http://api.jquery.com/clearQueue/

在所选功能之后阻止其他功能运行

3 个答案: