对于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，点击矩形就可以看到过渡效果了。