CODEWITHSUNDEEP
javascriptjquerycss
Sora
Sora

Reputation: 2551

Blinking a div with background-color in jquery using setInterval

the code :

<div id="divtoBlink" ></div>

css:

#divtoBlink{
 width:100px;
 height:20px;
 background-color:#627BAE;
}

javascript:

setInterval(function(){
  $("#divtoBlink").css("background-color","red");
  },100)

but nothing is happening can anyone tell me what i am doing wrong ?

fiddle Here

Upvotes: 8

Views: 73467

Answers (7)

Martijn
Martijn

Reputation: 16103

I suggest you don't change the color with javascript. It's better practice to do this via CSS. Changing styles should be done in a stylesheet, not in JS (in case if you want other/more properties changed).

You toggle a class, that class has a background definition (in this example, if you want you can add more properties). A fiddle as DEMO

<div id="divtoBlink" ></div>

.blinker{
    background: red;
}

let $div2blink = $("#divtoBlink"); // Save reference for better performance
let backgroundInterval = setInterval(function(){
    $div2blink.toggleClass("blinker");
 },100)

If you feel like a wild mood, you can add some css3 animation to it

#div2blink{
    transition: backgroundColor 0.05s ease-in-out;
}

Made a demo for the animation: DEMO (I slowed it down in the example!)

Upvotes: 35

mrtobo
mrtobo

Reputation: 41

Yet another example, but with much color and speed (based on martijn's example). Seizure warning:

var $div2blink = $("#divtoBlink"); // Save reference, only look this item up once, then save
var color = 0
var color_classes = ["backgroundRed", "backgroundYellow", "backgroundBlue"];
var backgroundInterval = setInterval(function(){
        color++;
    if (color === 3){
        color = 0;
    }
    $div2blink.toggleClass(color_classes[color]);
 },10)

http://jsfiddle.net/LkuNB/1983/

Upvotes: 4

Desmond
Desmond

Reputation: 1368

.blink-div {
    background: green;
    animation: flash 2s ease infinite;
}
<div class="blink-div">
  Hello World
</div>

Another way to animate a div is by using the css3 animations. 

.blink-div {
   animation: flash 2s ease infinite;
}

Upvotes: 5

Adam Genshaft
Adam Genshaft

Reputation: 824

You can also do it with pure CSS:

#divtoBlink{
    -webkit-animation: bgblink 3s;  /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;  /* Chrome, Safari, Opera */
}
@-webkit-keyframes bgblink {
    from {background-color: #fff;}
    50% {color:#000}
    to {background-color: #fff;}
}
@keyframes bgblink {
    from {background-color: #fff;}
    50% {background-color:#000}
    to {background-color: #fff;}
}

Upvotes: 3

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

Please have a look at below code

HTML:

<div id="divtoBlink" ></div>

CSS:

#divtoBlink{
 width:100px;
 height:20px;
background-color:#627BAE;
}

.class2{
     background-color:#ff0000 !important;
}

JS : 

setInterval(function(){
  $("#divtoBlink").toggleClass("class2");
  },100)

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

DEMO

setInterval(function () {
    $("#divtoBlink").css("background-color", function () {
        this.switch = !this.switch
        return this.switch ? "red" : ""
    });
}, 100)

Upvotes: 7

Zwen2012
Zwen2012

Reputation: 3498

Try this to change the color one time to "red", change background-color to backgroundColor

setInterval(function(){
$("#divtoBlink").css("backgroundColor","red");
},100)

If you want to toggle the class, than you have to do it with .toggle

Upvotes: -1

Related Questions