链接功能，停止并继续

Question

我有一些循环链接的函数。我找到了停下来的方法。我的问题是如何从停止的角度继续下去？

x.times {}

$("#blue").click(one);
	
	$("#stop").click(function() {
		$("#red, #blue, #green").stop();	
    });
		
	$("#continue").click(function() {//that's the question
  
  
    });
	
	function one(){
		$("#blue").fadeOut(4000, two);
	}
	
	function two(){
		$("#red").fadeIn(4000, three); 
	}
	
	function three(){
		$("#red").fadeOut(4000, four);
	}
	
	function four(){
		$("#blue").fadeIn(4000,one);
	}

#stop {
	position: absolute;
	top: 50px; left: 50px;
	width:50px; height:30px; line-height: 30px;
	text-align: center;
	background-color:grey;
	cursor:pointer;
}
	
#continue {
	position: absolute;
	top: 50px; left: 120px;
	width:100px; height:30px; line-height: 30px;
	text-align: center;
	background-color:grey;
	cursor:pointer;
}

#blue{
	position: absolute;
	top: 150px; left: 150px;
	width:200px; height:200px;
	background-color:blue;
	cursor:pointer;
}

#red{
	position: absolute;
	top:150px; left:150px;
	width:200px; height: 200px;
	background-color:red;
	display:none;
}

#green{
	position: absolute;
	top:150px; left:150px;
	width:200px; height: 200px;
	background-color:green;
	display:none;
}

Answer 1

Jquery fadeOut / FadeIn / FadeToggle提供了一个进步＆＃39;选项，一个可以返回持续时间的剩余时间的函数。知道了，加上正在播放的元素及其状态（fadeIn或fadeOut），我们可以修补一些东西：

＆＃13;

＆＃13;

// first element will fadeOut
var fadeOut = true;
var count = 0;
var elements = $("#red, #blue, #green");
var remaining = 4000;
var isPlaying = false;



$("#stop").click(function() {
  isPlaying = false;
  $("#red, #blue, #green").stop();	
});

$("#red, #blue, #green, #continue").click(function() {
  if(!isPlaying){
    fadeElements();
    isPlaying=true;
  }
});
	
function fadeElements(){
  if (fadeOut){
		$(elements[count]).fadeOut({
      duration:remaining,
      progress:function(a,b,c){
        remaining = c;
      },
      complete:function(){
      // when fadeOut is completed we want to fadeIn next element
      (count<elements.length-1)?count++:count=0;
      fadeOut=false;
      remaining=4000;
      fadeElements();
      }
    });
   }else{
   		$(elements[count]).fadeIn({
        duration:remaining,
        progress:function(a,b,c){
        remaining = c;
      },

        complete:function(){
      fadeOut=true;
      remaining=4000;
        fadeElements();      
        }
      });

   }
  
	}

＆＃13;

#stop {
	position: absolute;
	top: 50px; left: 50px;
	width:50px; height:30px; line-height: 30px;
	text-align: center;
	background-color:grey;
	cursor:pointer;
}
	
#continue {
	position: absolute;
	top: 50px; left: 120px;
	width:100px; height:30px; line-height: 30px;
	text-align: center;
	background-color:grey;
	cursor:pointer;
}

#blue{
	position: absolute;
	top: 150px; left: 150px;
	width:200px; height:200px;
	background-color:blue;
	cursor:pointer;
}

#red{
	position: absolute;
	top:150px; left:150px;
	width:200px; height: 200px;
	background-color:red;
	display:none;
}

#green{
	position: absolute;
	top:150px; left:150px;
	width:200px; height: 200px;
	background-color:green;
	display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stop">stop</div>
<div id="continue">continue</div>
	
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>

＆＃13;

＆＃13;

＆＃13;