<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch button</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<style>
.mui-switch {
position: relative;
display: block;
width: 74px;
height: 26px;
background-color: #fff;
background-clip: padding-box;
border: 2px solid #ddd;
border-radius: 20px;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: background-color,border;
transition-property: background-color,border;
}
.mui-switch .mui-switch-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 1;
width: 28px;
height: 28px;
background-color: #fff;
background-clip: padding-box;
border-radius: 16px;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.4);
box-shadow: 0 2px 5px rgba(0,0,0,.4);
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
-webkit-transition-property: -webkit-transform,width,left;
transition-property: transform,width,left;
}
.mui-switch.mui-active {
background-color: #4cd964;
border-color: #4cd964;
}
.mui-switch-mini {
width: 43px;
}
</style>
<body>
<div class="mui-switch mui-switch-mini" data-switch="4" style="transition-duration: 0.2s;">
<div class="mui-switch-handle" style="transition-duration: 0.2s; transform: translate(0px, 0px);"></div>
</div>
</body>
<script>
document.getElementsByClassName("mui-switch")
$(function () {
$(".mui-switch").click(function () {
if($(this).hasClass("mui-active")){
$(this).removeClass("mui-active");
$(this).find(".mui-switch-handle").css({"transition-duration":"0.2s","transform":"translate(0px, 0px)"})
}else{
$(this).addClass("mui-active");
$(this).find(".mui-switch-handle").css({"transition-duration":"0.2s","transform":"translate(16px, 0px)"})
}
})
})
</script>
</html>