Effect of toggle switch in js like bootstarp

The effect is as follows:

Principle:

This effect is available in flat-ui, but I don't want to reference a whole flat-ui. This effect depends on the html5 transition, so browser compatibility becomes a problem; remove js, html, and css of this effect from flat-ui;

The overall effect is dependent on jQuery. When you click the label button, the click event of input is triggered, and different classname values are added to the parent level;

Css:
. Toggle {
Background-color: #8AB9E3;
Border-radius: 60px;
Color: white;
Height: 29px;
Margin: 5px 12px 12px 0;
Overflow: hidden;
* Zoom: 1;
Display: inline-block;
Zoom: 1;
* Display: inline;
-Webkit-transition: 0.25 s;
-Moz-transition: 0.25 s;
-O-transition: 0.25 s;
Transition: 0.25 s;
-Webkit-backface-visibility: hidden;
-Webkit-box-sizing: initial
        }
. Toggle: before,. toggle: after {
Display: table;
Content :"";
        }
. Toggle: after {
Clear: both;
        }
. Toggle. toggle-off {
Background-color: # cbd2d8;
        }
. Toggle. toggle-off. toggle-radio {
/* Background-image: url ("../images/icon-off.png ")*/;
Background-position: 0 0;
Color: white;
Left: 0;
Margin-left: 0.5px;
Margin-right:-13px;
Z-index: 1;
        }
. Toggle. toggle-off. toggle-radio: first-child {
Left:-120%;
        }
. Toggle. toggle-radio {
/* Background: url ("../images/icon-on.png") right top no-repeat ;*/
Color: #0275d8;
Display: block;
Font-weight: 700;
Height: 21px;
Left: 120%;
Margin-left:-13px;
Padding: 5px 32px 3px;
Position: relative;
Text-align: center;
Z-index: 2;
-Webkit-transition: 0.25 s;
-Moz-transition: 0.25 s;
-O-transition: 0.25 s;
Transition: 0.25 s;
-Webkit-backface-visibility: hidden;
        }
. Toggle. toggle-radio: first-child {
Margin-bottom:-29px;
Left: 0;
        }
. Toggle input {
Display: none;
Position: absolute;
Outline: none! Important;
Display: block \ 9;
Opacity: 0.01;
Filter: alpha (opacity = 1 );
Zoom: 1;
        }
. Toggle. toggle-icon {
Border-radius: 6px 7px 7px 6px;
        }
. Toggle. The toggle-icon.toggle-off {
Border-radius: 7px 6px 6px 7px;
        }
. Toggle. Toggle-icon.toggle-off. toggle-radio {
/* Background-image: url ("../images/block-off.png ");*/
Background-position: 0 0;
        }
. Toggle. toggle-icon. toggle-radio {
/* Background-image: url ("../images/block-on.png ");*/
Background-position: 62px 0;
Border-radius: 6px;
Min-width: 27px;
Text-align: right;
        }
. Toggle. toggle-icon. toggle-radio: first-child {
Text-align: left;
Jquery:

<Script src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"> </script>
<Script>
// Js code of toggle plug-in
Var toggleHandler = function (toggle ){
Var toggle = toggle;
Var radio = $ (toggle). find ("input ");
Var checkToggleState = function (){
If (radio. eq (0). is (": checked ")){
$ (Toggle). removeClass ("toggle-off ");
} Else {
$ (Toggle). addClass ("toggle-off ");
                }
};
CheckToggleState ();
Radio. eq (0). click (function (){
$ (Toggle). toggleClass ("toggle-off ");
});
Radio. eq (1). click (function (){
$ (Toggle). toggleClass ("toggle-off ");
});
};
$ (". Toggle"). each (function (index, toggle ){
ToggleHandler (toggle );
});
</Script>