滑动开关按钮大家在各大网站都能见到，下面小编给大家分享一篇基于jquery实现的一个滑动按钮开关效果，感兴趣的朋友可以参考下实现代码。
先给大家展示下效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery做的滑动按钮开关</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"/>
</head>
<style>
.switch{
width: 100px;
margin
在网页设计中，滑动按钮开关（Toggle Switch）是一种常见的交互元素，用于切换两种状态，如开/关、启用/禁用等。本篇将详细讲解如何使用jQuery来实现一个滑动按钮开关。
我们需要了解HTML结构。一个基本的滑动按钮开关由一个包含两个子元素的容器组成，这两个子元素分别代表开关的两种状态，例如：
```html
<div class="switch">
<div class="btn_fath on" onclick="toogle(this)">
<div class="move" data-state="on"></div>
<div class="btnSwitch btn1">ON</div>
<div class="btnSwitch btn2">OFF</div>
</div>
<!-- 可能有多个状态的开关 -->
</div>
```
这里，`btn_fath`是滑动开关的父级容器，`move`表示可移动的滑块部分，`btn1`和`btn2`是显示状态的文字。
接下来是CSS样式，用于定义滑动开关的外观。这里使用了Bootstrap的样式库，同时自定义了一些样式，比如滑块的宽度、颜色、边框等。关键样式包括`.switch`、`.btn_fath`、`.move`、`.on`和`.off`，它们控制开关的整体布局和状态变化时的视觉效果。
```css
.switch {
width: 100px;
margin: 100px 0px 0 100px;
}
.move {
z-index: 100;
width: 40px;
border-radius: 20px;
height: 40px;
position: absolute;
cursor: pointer;
border: 1px solid #828282;
background-color: #f1eff0;
box-shadow: 1px 2px 2px 1px #fff inset, 0 0 5px 1px #999;
}
.on .move {
left: 60px;
}
.on.btn_fath {
background-color: #5281cd;
}
.off.btn_fath {
background-color: #828282;
}
```
我们需要JavaScript来处理点击事件和滑块的动画效果。在这个例子中，我们使用了jQuery库。`toogle`函数是处理点击事件的核心，它根据当前滑块的状态（通过`data-state`属性判断）来改变滑块的位置，并更新状态。
```javascript
function toogle(th) {
var ele = $(th).children(".move");
if (ele.attr("data-state") == "on") {
ele.animate({ left: "0" }, 300, function () {
ele.attr("data-state", "off");
alert("关！");
});
$(th).removeClass("on").addClass("off");
} else if (ele.attr("data-state") == "off") {
ele.animate({ left: '60px' }, 300, function () {
$(this).attr("data-state", "on");
alert("开！");
});
$(th).removeClass("off").addClass("on");
}
}
```
值得注意的是，动画的时间设置为300毫秒，但并未使用CSS3中的缓动效果。如果希望实现更平滑的过渡，可以考虑使用CSS3的`transition`属性，或者使用jQuery的`easing`插件来添加更多的缓动效果。
此外，`animate`方法中的回调函数会在动画完成时执行，这里的回调函数主要用于更新滑块的状态并给出提示。
总结一下，创建一个jQuery滑动按钮开关主要涉及以下步骤：
1. 定义HTML结构，包括滑动开关的容器和滑块元素。
2. 使用CSS设置样式，定义开关的初始状态和动态效果。
3. 使用jQuery监听点击事件，处理状态切换和动画效果。
这个示例提供了一个基本的滑动开关实现，你可以根据实际需求进行扩展，比如添加更多状态、自定义样式或增加事件监听功能。
