jquery仿苹果手机IOS开关效果

首先定义一个外层div，里面的设置一个span作为按钮可以点击，当点击它的时候，使用动画让它向右滑动，在滑动的同时，可以更改一些其他属性，达到更好的效果

<div class="switch-btn">
                        <span class="kx-img switch-img-off"></span>
                        <span class="point-slide"></span>
                        <span class="kx-img switch-img-on"></span>
                    </div>
js代码：

<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');

        }

        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>

效果图：

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索代码
， this
属性
jquery 开关效果代码、jquery 滑动开关按钮、jquery开关按钮特效、jquery 开关按钮、jquery 开关，以便于您获取更多的相关知识。