CODEWITHSUNDEEP
javascriptjquerycssgoogle-chromebackground
Sandun Harshana
Sandun Harshana

Reputation: 729

Div color change using jquery does notwork when -webkit- is used in chrome

There is a div.It's background color is change with white color in every second.there is a button to change background color of that div. When click the button, change the new background color with white in every second.

bellow code is correctly running.but when click the button to change background color, only mozilla firefox change the background color color. Google chrome take old color.it does not change to new color.

CSS:

This code is use to change background color of div every second.

.circle1 {
    background-color: red; 
    animation-name: homeCycle1; 
    animation-duration:1s; 
    animation-iteration-count:infinite;
    -webkit-animation-name: homeCycle1; 
    -webkit-animation-duration:1s; 
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name: homeCycle1; 
    -moz-animation-duration:1s; 
    -moz-animation-iteration-count:infinite;

     }  

    @keyframes homeCycle1 
    {
    25% {background-color:white;} 

    } 

    @-webkit-keyframes homeCycle1 
    { 
    25% {background-color:white;} 

    }

    @-moz-keyframes homeCycle1 
    { 
    25% {background-color:white;} 

    }

Here is my jQuery code (it is running with button click)

function colorchange(colorCode){ 
    $('.circle1').css({"background-color":colorCode});
}

But when I click the button in chrome browser does not change the div's background color. In mozilla firefox it works correctly.

When I remove this CSS for every browser color is changing. But only for button click event. Color is not changing every second.

Removed CSS:

-webkit-animation-name: homeCycle1; 
    -webkit-animation-duration:1s; 
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name: homeCycle1; 
    -moz-animation-duration:1s; 
    -moz-animation-iteration-count:infinite;

I want to do this for firefox and google chrome.

Upvotes: 2

Views: 366

Answers (2)

Chamika Sandamal
Chamika Sandamal

Reputation: 24302

Just clone the element and then replace the original with clone after color change. Demo

function colorchange(colorCode) {
    $('.circle1').css({
        "background-color": colorCode
    });
    var elm = $('.circle1').get(0);
    var newone = elm.cloneNode(true);
    elm.parentNode.replaceChild(newone, elm);
}

$(".button").click(function () {
    colorchange("#ccc");
});

HTML

<div class="circle1"></div>
<button class="button">change color</button>

If you are not happy with the .replaceChild try this Demo

function colorchange(colorCode) {
    var el =$('.circle1');
    el.css({
        "background-color": colorCode
    });
   el.replaceWith(el.clone(true));
}

Edit

When you have multiple elements you can use following code, Demo

function colorchange(colorCode) {
    var el =$('.circle1');
    el.css({
        "background-color": colorCode
    });
    el.each(function(){
         $(this).replaceWith($(this).clone(true));
    });

}

Upvotes: 1

Saurabh Udaniya
Saurabh Udaniya

Reputation: 478

You can define a stylesheet like this

 .noAnim {
 /*CSS transitions*/
 background-color: #FFFFFF;
 -o-transition-property: none !important;
 -moz-transition-property: none !important;
 -ms-transition-property: none !important;
 -webkit-transition-property: none !important;
 transition-property: none !important;
 /*CSS transforms*/
 -o-transform: none !important;
 -moz-transform: none !important;
 -ms-transform: none !important;
 -webkit-transform: none !important;
 transform: none !important;
 /*CSS animations*/
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}

And if you want to stop the animation use the following

$(".circle1").addClass("noAnim");

Upvotes: 1

Related Questions