Slider toggle without CSS

I'm relatively proud of this toggle: http://jsfiddle.net/AmrnK/

The problem is that it is not cross-browser because it uses CSS transitions.

Any suggestions to build开发者_Go百科 something similar using jQuery instead?

I use jQuery UI's .switchClass() for animation and jQuery's .queue() to change text at the end of the animation to reproduce this behaviour: http://jsfiddle.net/william/AmrnK/2/

You could also use jQuery's .animate() if you don't want to have CSS classes.

In the fiddle you provided CSS3 is only used to give a curved border and the shadow to html elements which is not possible using jQuery. You can use images to get such look and feel only if required.

In the fiddle the toggle was working only if you click on On/Off which is not a good UX. I have modified it to be effective throughout the toggle area take a look at this fiddle.

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