对于background-color，可以直接transition: background-color 2s就能实现过渡效果，但对于background:-webkit-radial-gradient(circle,#ffc71d 0,rgba(168,117,14,.5) 130%);就无能为力了。对于这种复杂的背景，只能给opacity添加过渡效果了，当做背景图片处理。
首先，设置过渡的几种状态：
<div class='box'><!--状态1--><div class='state state1'></div><!--状态2--><div class='state state2'></div></div>
然后对这几种状态的透明度设置过渡效果：
.state{transition:opacity 2s;}.state1{background:-webkit-radial-gradient(circle,#ffc71d 0,rgba(168,117,14,.5) 130%);opacity:1}.state2{background:-webkit-radial-gradient(circle,#585858 0,#ccc 130%);;opacity:0}
切换状态时，就切换这几个状态的透明度，即可：
box.on('click',function(){if(state1.css('opacity') == 1){state2.css('opacity',1)state1.css('opacity',0)}else{state1.css('opacity',1)state2.css('opacity',0)}})
效果可看：demo，点击矩形就可以看到过渡效果了。
