Jquery将三个按钮动画化以打开关闭开关

Jquery animate three buttons to make on off switch

本文关键字：开关 动画 按钮 三个 Jquery      更新时间：2023-09-26

我需要对三个按钮进行动画处理以创建复选框的效果，这三个按钮排列为：

| left | center | right|

然后，如果设置了 var 状态，则三个按钮应以动画形式向左显示，以便仅显示中心和右侧按钮：

| center | right|

如果未设置 var 状态，则三个按钮应向左动画，以便仅显示中心和右侧按钮：

 | left | center |

如果单击显示的两个按钮中的任何一个，则VAR状态将更改，按钮也会相应更改。

效果应该类似于这个引导插件：

http://www.bootstrap-switch.org/examples.html

但我只需要这个功能来满足我的特殊需求。

我开始了这个 http://www.bootply.com/qraJqgMz0D

引导代码也如下：

<!DOCTYPE html>
<html lang='en'>
<head>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-toggle" style="white-space: nowrap;">
    <button id="left-btn" class="btn btn-primary toggler" style="float: none;display: inline-block;">Left</button>
    <button id="center-btn" class="btn btn-default toggler" style="float: none;display: inline-block;margin-left:0;margin-right:0;">Center</button>
    <button id="right-btn" class="btn btn-danger toggler" style="float: none;display: inline-block;">Right</button>
</div>

<script>  
$(document).ready(function() {
  var status = false;
  $('.toggler').on('click', function(e) {
    //$(this).toggleClass('active');
    switch_status();
    console.log('click');
  });
  function switch_status(status) {
    var left = $('#left-btn');
    var center = $('#center-btn');
    var right = $('#right-btn');
    if (status) {
      left.focus().animate({width:'toggle'},350);
    }
    else {
      left.focus().animate({width:'toggle'},350);
    }
    status = !status;
  }
  switch_status(status);
});
</script>

</body>
</html>

这个怎么样？

简讯 

var status = false;
$('.toggler').click(function(){
    var $innerDiv = $('#innerdiv');
    if(status)
        $innerDiv.animate({"marginLeft":"0"},320);
    else
        $innerDiv.animate({"marginLeft":"-80"},320);
    status = !status;
});

.CSS

#innerdiv {
    width: 240px;
}
#outerdiv{
    width: 154px;
    overflow: hidden;
}
#outerdiv button:focus{
    outline: 0;
}
#outerdiv button{
    width:75px;
}

.HTML

<div class="btn-group btn-toggle" id="outerdiv" >
    <div id="innerdiv">
        <button id="left-btn" class="btn btn-primary toggler">Left</button>
        <button id="center-btn" class="btn btn-default toggler">Center</button>
        <button id="right-btn" class="btn btn-danger toggler">Right</button>
    </div>
</div>

小提琴演示

试试这个

$(document).ready(function() {
  var status = false;
               $('#right-btn').focus().animate({width:'toggle'},350);
  $('.toggler').on('click', function(e) {
    //$(this).toggleClass('active');
      if(status == false)
      {
          status = true;
      }
      else
      {
          status = false;
      }
    switch_status();
    console.log(status);
  });
  function switch_status(status) {
    var left = $('#left-btn');
    var center = $('#center-btn');
    var right = $('#right-btn');
    if (status) {
      left.focus().animate({width:'toggle'},350);
              right.focus().animate({width:'toggle'},350);
    }
    else {
      left.focus().animate({width:'toggle'},350);
              right.focus().animate({width:'toggle'},350);
    }
    status = !status;
  }

});
相关文章：