没有CSS的滑块切换

Question

我为这次切换感到骄傲：http://jsfiddle.net/AmrnK/

问题是它不是跨浏览器，因为它使用CSS转换。

使用jQuery构建类似内容的任何建议？

Answer 1

在你提供的小提琴中CSS3仅用于给出一个弯曲的边框和阴影到html元素，这是使用jQuery无法实现的。只有在需要时，您才可以使用图像来获得这种外观。

在小提琴中，只有当你点击On / Off这不是一个好的用户体验时，切换才有效。我已将其修改为在整个切换区域有效，看看这个小提琴。

http://jsfiddle.net/AmrnK/1/

Answer 2

我使用jQuery UI的.switchClass()表示动画，jQuery的.queue()更改动画结尾的文字以重现此行为：http://jsfiddle.net/william/AmrnK/2/

如果你不想拥有CSS类，你也可以使用jQuery的.animate()。