First define an outer div, inside the set a span as a button can be clicked, when clicked on it, use animation to slide it to the right, while sliding, you can change some other properties, to achieve better results
<div class= "switch-btn" >
<span class= "kx-img switch-img-off" ></span>
<span class= "Point-slide" ></span>
<span class= "Kx-img Swit Ch-img-on "></span>
</div>
JS Code:
<script> var time=0; $ (". Register-next-btn"). Click (function () {
location.href= ' register-next.html ';
}); $ ('. switch-btn '). Click (function () { time
++; if (time==1) {
$ (this). css ({"Background-color": "#d2d2d2"}); $ ('. Point-slide '). Animate ({"Left": "
44px "});
$ ('. switch-img-on '). Hide ();
$ ('. Switch-img-off '). Show ();
$ (' #psw '). attr (' type ', ' password '); &NBSP;&NBSP} if (time==2) {
$ ('. Point-slide '). Animate ({"Left": "0px"}); $ (this). css ({"Background-color": "#
f68484 "});
$ ('. switch-img-on '). Show ();
$ ('. Switch-img-off '). Hide ();
$ (' #psw '). attr (' type ', ' text ');
time=0; }
}); </script>
Effect Chart: