jquery -changing css property and repeating

Question

I have this sprite sheet http://codepen.io/benasl/pen/yabpxo that I want to be changed to another one after it ends, and after the second one ends the first one needs to start again, and so on... I managed to do this with just changing css properties, but now how do I make them loop?

setTimeout(function() {
  $(".kambarys2").css('display', 'block');
}, 3100);

body {
  background-color: #69e4c3;
}
.kambarys {
  background: url('http://i.imgur.com/pra08AS.jpg');
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 380px;
  height: 372px;
  top: 100px;
  left: 40%;
  animation: convejor 3s steps(76) infinite;
}
@keyframes convejor {
  from {
    background-position: 0px;
  }
  to {
    background-position: -28880px;
  }
}
.kambarys2 {
  background: url('http://i.imgur.com/TFvZvWz.jpg');
  background-repeat: no-repeat;
  position: absolute;
  display: inline-block;
  width: 380px;
  height: 372px;
  top: 108px;
  left: 40%;
  animation: convejor 3s steps(76) infinite;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys"></div>
<div class="kambarys2"></div>

mplungjan · Accepted Answer · 2016-09-27 13:12:48Z

1

change the background image using an array:

var cnt=0,images=["http://i.imgur.com/TFvZvWz.jpg","http://i.imgur.com/pra08AS.jpg"]
setInterval(function() {
  $(".kambarys").css({"background-image":"url("+images[cnt]+")"});
  cnt++;
  if (cnt>=images.length) cnt=0;
}, 3100);

body {
  background-color: #69e4c3;
}
.kambarys {
  background: url('http://i.imgur.com/pra08AS.jpg');
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 380px;
  height: 372px;
  top: 100px;
  left: 40%;
  animation: convejor 3s steps(76) infinite;
}
@keyframes convejor {
  from {
    background-position: 0px;
  }
  to {
    background-position: -28880px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys"></div>

Toggle two divs

var cnt=0;
setInterval(function() {
  $(".kambarys0").toggle(cnt);
  $(".kambarys1").toggle(!cnt); cnt=!cnt
}, 3100);

body {
  background-color: #69e4c3;
}
.kambarys0 {
  background: url('http://i.imgur.com/pra08AS.jpg');
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 380px;
  height: 372px;
  top: 100px;
  left: 40%;
  animation: convejor 3s steps(76) infinite;
}
.kambarys1 {
  display:none;
  background: url('http://i.imgur.com/TFvZvWz.jpg');
  background-repeat: no-repeat;
  position: relative;
  width: 380px;
  height: 372px;
  top: 100px;
  left: 40%;
  animation: convejor 3s steps(76) infinite;
}
@keyframes convejor {
  from {
    background-position: 0px;
  }
  to {
    background-position: -28880px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys0"></div>
<div class="kambarys1"></div>

Loop more than two divs

var cnt = 0;
setInterval(function() {
    cnt++;  
    if (cnt >= $(".kambarys").length) cnt = 0;
    $(".kambarys").hide();
    $("#kambarys" + cnt).show();
  },
  3100);

body {
  background-color: #69e4c3;
}
.kambarys {
  position: relative;
  display: inline-block;
  width: 380px;
  height: 372px;
  top: 100px;
  left: 40%;
  animation: convejor 3s steps(76) infinite;
}
#kambarys0 {
  background: url('http://i.imgur.com/pra08AS.jpg');
  background-repeat: no-repeat;
}
#kambarys1 {
  display: none;
  background: url('http://i.imgur.com/TFvZvWz.jpg');
  background-repeat: no-repeat;
}
#kambarys2 {
  display: none;
  background: url('http://i.imgur.com/F6bNA00.jpg');
  background-repeat: no-repeat;
}


@keyframes convejor {
  from {
    background-position: 0px;
  }
  to {
    background-position: -28880px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys" id="kambarys0"></div>
<div class="kambarys" id="kambarys1"></div>
<div class="kambarys" id="kambarys2"></div>

edited Sep 27, 2016 at 13:12

answered Sep 27, 2016 at 12:00

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Benas Lengvinas Over a year ago

It works, however, when they change there is a slight blink and that is what i'm trying to avoid

mplungjan Over a year ago

Then have two and do $(".kambarys0").toggle(cnt);$(".kambarys1").toggle(!cnt); cnt=!cnt

Benas Lengvinas Over a year ago

I don't quite follow what to change

Benas Lengvinas Over a year ago

For me it blinks the first time and then it goes without blinking, however if i had more than two spritesheets? lets say 3 or 4? codepen.io/benasl/pen/yabpxo

Benas Lengvinas Over a year ago

Thanks, you were very helpful!

|

Patrick Mlr · Accepted Answer · 2016-09-28 05:48:51Z

1

One answer would be that you have a function for this and this function would restart itself every X seconds.

Example:

function startcounter() {
    $( "#foo" ).append( "<p>Test</p>" ); // do what you want
    setTimeout(startcounter, 3*1000); // 3*1000 = 3 Seconds.
}

setTimeout(startcounter, 3*1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"><p>This is the div where the JS add every 3 Seconds a "Test".</p></div>

edited Sep 28, 2016 at 5:48

answered Sep 27, 2016 at 11:55

Patrick Mlr

2,9652 gold badges18 silver badges25 bronze badges

2 Comments

Benas Lengvinas Over a year ago

So i should type the time that i want it to restart in 'startcounter()'?

Benas Lengvinas Over a year ago

Somehow it doesn't loop

Collectives™ on Stack Overflow

jquery -changing css property and repeating

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related