jQuery如何实现一个滑动按钮开关

滑动开关按钮大家在各大网站都能见到，下面小编给大家分享一篇基于jquery实现的一个滑动按钮开关效果，感兴趣的朋友可以参考下实现代码。

先给大家展示下效果图：

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title jquery做的滑动按钮开关/title link rel='样式表type=' text/CSS ' href=' bootstrap/bootstrap。量滴CSS '/头部样式.开关{ width : 100 pxmargin : 100 px 0 px 0 100 px }。BTN _父亲{ margin-top : 10px；相对位置：边界半径： 20px} .btn1{左侧浮动：} .btn2{右侧浮动：} .btnSwitch { height: 40px宽度： 50pxborder:nonecolor: # fff线高： 40pxfont-size : 16px文本对齐：中心；z-index : 1；} .移动{ z-index : 100宽度： 40px边界半径： 20px高度： 40px绝对位置：光标：指针；border: 1px固体# 828282;背景色： # f1 eff 0；箱形阴影： 1px 2px 2px 1px # fff插图，0 0 5px 1px # 999}。打开。向左移动{ : 60px} .打开。BTN _父亲{背景色： # 5281光盘；} .关掉。BTN _父亲{背景色： # 828282；}/style body div class=' switch ' div class=' BTN _父亲清除修复ON ' onclick=' toogle(this)' div class=' move ' data-state=' ON '/div class=' BTN switch BTN 1 ' ON/div class=' BTN switch BTN 2 ' OFF/div/div class=' BTN _父亲清除修复OFF ' onclick=' toogle(this)' div class=' move ' data-state=' OFF '/div class=' BTN switch BTN 1 ' ON/div class='孩子们移动')；if(ele。attr(' data-state ')==' on '){ ele。动画({ left : ' 0 ' }，300，function(){ ele。attr('数据状态'，'关闭')；警报('关!');});$(第)次.removeClass('on ').添加CLaSS(' off ')；} else if(ele。attr('数据状态')==' off '){ ele。动画({ left : ' 60px ' }，300，function(){ $(this).attr('数据状态，' on ')；警报('开!');});$(第)次.removeClass('off ').添加CLaSS(' on ')；} }/脚本/正文/html需要注意的是：

1、这边滑动使用的速度是300毫秒，好像是匀速，没有线性的快慢那种；试着找下能不能像CSS3中缓解那种线性运动的。

2、动画方法中的回调函数，即运动结束后调用的功能。

以上所述是小编给大家介绍的jQuery=实现一个滑动按钮开关的功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！