CODEWITHSUNDEEP
jqueryfunction
Nrc
Nrc

Reputation: 9797

Chaining function, stop and continue

I have some functions that are chaining in a loop. I find the way to stop. My question is how to continue from the point it stopped?

$("#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;
}
<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>

Upvotes: 0

Views: 68

Answers (1)

scraaappy
scraaappy

Reputation: 2886

Jquery fadeOut / FadeIn / FadeToggle provide a 'progress' option, a function wich can return the remaining time of the duration. Knowing that, plus the element wich is playing and its state (fadeIn or fadeOut), we can tinker something :

// 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();      
        }
      });

   }
  
	}
#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;
}
<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>

Upvotes: 1

Related Questions