0

我有一个 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>
4

3 回答 3

0

这是因为你所有的 comProg 函数都有一个回调函数，它调用一个 comProg 函数，因此动画将每 2 秒运行一次。

顺便说一句，您可以编写comProg2而不是function () { comProg2(); }尽管您的所有 comProg 函数都是相同的，但您可以只使用一个函数并使用一个回调来调用相同的函数而不是下一个执行相同操作的函数......

于 2013-07-15T12:05:42.277 回答
0

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

于 2013-07-15T12:07:46.057 回答
0

添加类似的东西

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

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

见http://api.jquery.com/clearQueue/

于 2013-07-15T12:14:38.020 回答