Question

有一个div.It的背景颜色每秒都会变成白色。有一个按钮可以改变那个div的背景颜色。单击按钮时，每秒更改一次白色的新背景颜色。

以下代码正确运行。但是当单击按钮更改背景颜色时，只有mozilla firefox会更改背景颜色。谷歌浏览器采用旧颜色。它不会改变为新颜色。

CSS：

此代码用于每秒更改div的背景颜色。

.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;} 

    }

这是我的jQuery代码（它按下按钮运行）

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

但是当我点击Chrome浏览器中的按钮时，不会改变div的背景颜色。在mozilla firefox中它可以正常工作。

当我删除此CSS时，每个浏览器的颜色都在变化。但仅适用于按钮点击事件。颜色不会每秒都在变化。

删除了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;

我想为firefox和google chrome执行此操作。

Answer 1

只需克隆元素，然后在换色后用克隆替换原始元素。 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>

如果您对.replaceChild不满意，请尝试Demo

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

修改

如果您有多个元素，则可以使用以下代码Demo

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

Answer 2

您可以定义这样的样式表

 .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;
}

如果你想停止动画，请使用以下

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

在chrome中使用-webkit-时，使用jquery的Div颜色更改不起作用

2 个答案: