CODEWITHSUNDEEP
jqueryloopshideshow
Vu Hao Tran
Vu Hao Tran

Reputation: 33

How to show hide two image loop 4 times use jquery

My HTML:

<div class="luck">
  <div class="image1"></div>
  <div class="image2"></div>
  <div class="image3"></div>
</div>

My Javascript:

var 
    delay = 0,
    $ele = $(".luck > div");

$ele.hide();

for(var i = 0; i < 2 ; i++){
    $ele.eq(i).show();
}

My CSS:

.luck {
  position: relative;
  width: 500px;
  height: 300px;
}

.luck > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 300px;
  display: none;
}

.image1 {
  background: red;
}

.image2 {
  background: green;
}

.image3 {
  background: blue;
}

Now I have 3 div : image1 , image2 , image3.

I want it run :

The first : image1 is show , next image2 is show

Again 1 : image1 is show , next image2 is show

Again 2 : image1 is show , next image2 is show

Again 3 : image1 is show , next image2 is show

It loop 4 times , then image3 is show , the progress is end .

Please help me by use jQuery

This is my jsfiddle : https://jsfiddle.net/u76r9wc2/

Upvotes: 2

Views: 585

Answers (2)

Ankit Kathiriya
Ankit Kathiriya

Reputation: 1231

You can do it with recursion.

var $ele = $(".luck > div");
var iter=8;
$ele.hide();
showImg(0);
function showImg(i){
	iter--;
  if(iter<0)
  {
  	$ele.eq(2).show();
    return;
  }
	if(i<=1)
  {
		$ele.eq(i).show();  
    setTimeout(function(){ showImg(i+1); }, 1000);  
  }
  else
  {
  	$ele.hide();
  	showImg(0);
  }
	
}
.luck {
  position: relative;
  width: 500px;
  height: 300px;
}

.luck > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 300px;
  display: none;
}

.image1 {
  background: red;
}

.image2 {
  background: green;
}

.image3 {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="luck">
  <div class="image1"></div>
  <div class="image2"></div>
  <div class="image3"></div>
</div>

Upvotes: 1

Simhachalam Gulla
Simhachalam Gulla

Reputation: 998

Can you try below one...This is what you required?

<div class="luck">
    <div class="image1"></div>
    <div class="image2"></div>
    <div class="image3"></div>
</div>
<style>
  .luck {
    position: relative;
    width: 500px;
    height: 300px;
  }

  .luck > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 300px;
    display: none;
  }

  .image1 {
    background: red;
  }

  .image2 {
    background: green;
  }

  .image3 {
    background: blue;
  }

</style> 

<script>
  var 
    itr = 0,
    delay = 500,
    $ele = $(".luck > div");

  $ele.hide();

  /*
  for(var i = 0; i < 2 ; i++){
    $ele.eq(i).show();
  }
  */
  show_repeat(0);
  function show_repeat(i){
    $($ele).eq(i).show(delay, function(){
       itr++;
       if(itr == 8){
          $($ele).eq(2).show(delay);
       } else if(itr % 2 == 0){
          $($ele).eq(1).hide();
          show_repeat(0);
       } else {
          $($ele).eq(0).hide();
          show_repeat(1);
       }
    });
  }     
</script>

https://jsfiddle.net/u76r9wc2/1/

Upvotes: 1

Related Questions