jQuery-UI 在toggleClass ('.selector' 上淡出子容器，时间)

Question

我尝试使用 jquery-ui 的 addClass/toggleClass 函数在两种状态之间进行转换。我的问题是我也想淡出子容器。

这是一个示例:http://jsfiddle.net/xhWjP/1/

我希望 #blue 和 #red 也能动画化，而不仅仅是 #transition block 。 (点击时)。是否已有内置解决方案或者我必须自己编写此行为代码？

谢谢!

Answer 1

可以使用 CSS3 过渡。 (我认为这只是众多方法中的一种)。

-webkit-transition: all .2s linear; 
-moz-transition: all .2s linear; 
-ms-transition: all .2s linear; 
-o-transition: all .2s linear; 
transition: all .2s linear; 

Demo

可用性:http://caniuse.com/#search=transition

IE 10+、FF 9+、Chrome 17+