CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sagar Kodte
Sagar Kodte

Reputation: 3815

how to change css after some seconds continously?

I want to change the stroke value black to white after some seconds continuously.

here is my script

<script>
$(document).ready(function(){
    $('svg').css({'stroke':'#000'});
})
</script>

Upvotes: 1

Views: 1268

Answers (3)

Abhinav
Abhinav

Reputation: 8168

You can use recursive function concept to achieve what you are trying to do

In the below code, you keep changing the status codes and colors will be changing accordingly. Here the function changeColorFunc calls itself every 2 seconds

Take a look at JS FIDDLE below

$(document).ready(function() {
  setInterval(function() {
    changeColor(1);
}, 2000);
});


var changeColor = function changeColorFunc (status) {
    if (status == 1) {
       $("circle").attr("class", "white");
      setInterval(function() {
                    changeColorFunc (0);
      }, 2000);
    }
    if (status == 0) {
       $("circle").attr("class", "black");
      setInterval(function() {
                    changeColorFunc (1);
      }, 2000);
    }
}

JS FIDDLE

Upvotes: 1

mplungjan
mplungjan

Reputation: 177688

I thought you meant

$(function(){
    setInterval(function() { $('svg').toggleClass("white") },2000);
});

but you actually mean

$(function(){
    var stroke = $('circle').attr("stroke");
    setInterval(function() { 
      stroke = stroke=="white"?"black":"white"
      $('circle').attr("stroke",stroke) 
    },2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg>

Upvotes: 3

Harish Kommuri
Harish Kommuri

Reputation: 2854

Try this similar one with css and jQuery

$(document).ready(function() {
   setInterval(function() {
   $("circle").attr("stroke", "white");
     setTimeout(function() {
       $("circle").attr("stroke", "black");
     }, 500);
   }, 1000);
});

Upvotes: 1

Related Questions