連續動畫元素的背景

Question

是否可以在循環中動畫元素的背景顏色？

例如：如果我們有一個<div>其中background-color:red，並通過jQuery我將它更改爲background-color:blue。現在我想要它toggle紅色和藍色之間連續。

我該怎麼辦？

Answer 1

CSS

.divClassRed{ 
    background-color:red; 
} 
.divClassBlue{ 
    background-color:blue; 
} 

jQuery的

setInterval(function(){ 
    if($('#myDiv').hasClass('divClassRed')){ 
     $('#myDiv').addClass('divClassBlue').removeClass('divClassRed');    
    }else{ 
     $('#myDiv').addClass('divClassRed').removeClass('divClassBlue'); 
    } 

},1000); 

DEMO

Answer 2

試試這個

var x; 

    function changecolors() { 
     x = 1; 
     setInterval(change, 1000); 
    } 

    function change() { 
     if(x == 1) { 
      color = "red"; 
      x = 2; 
     } else { 
      color = "blue"; 
      x = 1; 
     } 

     document.body.style.background = color; 
    } 

Answer 3

退房這個JS提琴http://jsfiddle.net/uU4gu/

setInterval(function() { 
    $('div').css("background-color", "yellow"); 
    setTimeout(function() { 
     $('div').css("background-color", "red"); 
    }, 1000); 
}, 2000); 

Answer 4

@keyframes epilepsy { 
    from { 
     background: red; 
     color:blue; 
    } 
    to { 
     background: blue; 
     color:red; 
    } 
} 

.element { 
    animation-duration: 0.1s; 
    animation-name: epilepsy; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

Working Demo

注意：我沒加的供應商前綴

更新

我有點熱心，包括使用jQuery和modernizr回退。請注意，默認情況下jQuery不支持背景顏色轉換; jQuery color plugin需要

$(document).ready(function() { 
    // Using Modernizr to test if CSS transition is supported or not 
    if(!Modernizr.csstransitions){ 
    setInterval(function() { 
     // Go really crazy and do the amazing voodoo using JavaScript 
     $('.default').animate({ 
     backgroundColor: 'red', 
     color: 'blue' 
     }, 100).animate({ 
     backgroundColor: 'blue', 
     color: 'red' 
     }, 100); 
    }, 100); 
}); 

}); 

Answer 5

看看這個小提琴.. http://jsfiddle.net/SidJadeja/XqwDC/

就稱爲遞歸函數連續動畫之間的紅色和藍色的開關。您可以根據需要修改持續時間。

JS：

function anim() { 
    $("body").animate({ 
     backgroundColor: "darkblue" 
    }, { 
     duration: 5000, 
     complete: function() { 
      $("body").animate({ 
       backgroundColor: "darkred" 
      }, { 
       duration: 5000, 
       complete: function() { 
        anim(); 
       } 
      }); 
     } 
    }); 
}