单击时将背景幻灯片设为药丸

Question

当我点击我的按钮时，我正在尝试做一个小动画。

我希望背景向左和向右滑动以说明用户选择。

以下是我的试用版：JSFiddle

$(".test").click(function() {
  $(".test").removeClass('active');
  $(this).addClass('active');
})

div{
  list-style-type: none;
}
div a {
  text-decoration: none;
}
#cont {
  background-color: white;
  width: 100%;
  padding: 2px;
  height: 40px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.choice {
  float: left;
  margin-right: 1px;
}
.choice div{
  width: 100px;
  padding: 11px 16px;
  text-align: center;
  float: left;
  background: #ff3232;
  margin-left: 10px;
  transition: all 0.4s linear;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.choice .left {
  background: linear-gradient(to right, white 50%, #b7d4e1 50%);
  background-size: 200% 100%;
  background-position: left bottom;
}
.choice .right {
  background: linear-gradient(to right, #b7d4e1 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
}
.choice .left.active {
  background-position: right bottom;
}
.choice .right.active {
  background-position: left bottom;
}
.choice div a {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choice">
  <div id="cont">
    <div class="test left active"><a href="#">Semaine</a>
        </div>
    <div class="test right"><a href="#">Mois</a>
        </div>
  </div>
</div>

但是我希望背景能够长时间保持丸形状。

Answer 1

根据您的使用情况，您可以使用突出显示所点击的元素而不使用JS 关键是要使用CSS transitions并使用transition delay进行游戏，以便药丸停留在最后一个重点链接之下。

药丸的额外跨度为border-radius。它是在重点链接下翻译的：

.choice{
  background-color: white;
  float: left;
  padding: 2px;
  height: 40px;
  border-radius: 20px;
  position:relative;
  z-index:1;
}
.link {
  width: 100px;
  padding: 11px 16px;
  text-align: center;
  float: left;
  text-decoration:none;
  color:#000;
}
.pill{
  position:absolute;
  left:16px; top:0;
  width:100px; height:100%;
  background:#B7D4E1;
  border-radius:20px;
  z-index:-1;
  transition: 9999s transform .2s ease-out;
}
.link:nth-child(2):focus ~ .pill{
  transform: translatex(132px);
  transition: transform .18s ease-out;
}
.link:nth-child(1):focus ~ .pill{
  transform: translatex(0px);
  transition: transform .18s ease-out;
}

<div class="choice">
  <a class="link" href="#">Semaine</a>
  <a class="link" href="#">Mois</a>
  <span class="pill"></span>
</div>

Answer 2

https://jsfiddle.net/danvim/4jxc91dq/1/

我重新构建了你的结构，并使用了3d翻译药片。

$(function(){
  $(".choice button").click(function() {
  	  $(this).closest(".cont").removeClass("left right");
    if ($(this).hasClass("left")) {
  	  $(this).closest(".cont").addClass("left");
    } else {
  	  $(this).closest(".cont").addClass("right");
    }
  })
})

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

body {
  background:#ccc;
}

span {
  list-style-type: none;
}

span a {
  text-decoration: none;
}

.cont {
  background-color: white;
  width: 100%;
  padding: 5px;
  border-radius: 25px;
}

.cont::before {
  content: " ";
  background:#B7D4E1;
  width: 100px;
  height:40px;
  border-radius: 20px;
  position:absolute;
  top:5px;
  left:5px;
  transition: all 0.2s ease-out;
}

.choice {
  float: left;
  margin-right: 1px;
}

.choice button {
  color: #000;
  width: 100px;
  height:40px;
  border:0;
  display:inline-block;
  text-align: center;
  background: transparent;
  transition: all 0.4s linear;
  border-radius: 20px;
  position:relative;
}

.choice .cont.right::before {
  transform: translate3d(105px,0,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="choice">
  <div class="cont left">
    <button type="button" class="left">Semaine</button>
    <button type="button" class="right">Mois</button>
  </div>
</div>

如果要将无线电表单转换为元素，可以尝试扩展jQuery：

$(function(){
  $.fn.extend({
    makeRadio: function(){
      var temp = '<div class="choice"';
      var temp1 = '><div class="cont left">';
      var temp2 = '<button type="button" class="';
      var temp3 = '</button> ';
      var temp4 = '</div></div>';
      var $form = $(this);
      var $items = $form.children("input[type='radio']");
      var id = $form.attr("id");
      if ($items.length == 2) {
        var output = temp + ' id="' + id + '"' + temp1;
        for(var i = 0; i <2; i++) {
          output += temp2 + (i == 0 ? "left" : "right") + '" data-value="'+ $($items[i]).attr("value") + '">' + $($items[i]).attr("data-display") + temp3;
        }
        output += temp4;
        $form[0].outerHTML = output;
        console.log("#"+id+" button");
        $("#"+id+" button").click(function() {
  	      $(this).closest(".cont").removeClass("left right");
          if ($(this).hasClass("left")) {
  	        $(this).closest(".cont").addClass("left");
          } else {
  	        $(this).closest(".cont").addClass("right");
          }
        });
      }
    }
  });
  $("#convert").click(function(){$("#radios").makeRadio();})
  
  
})

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

body {
  background:#ccc;
}

span {
  list-style-type: none;
}

span a {
  text-decoration: none;
}

.cont {
  background-color: white;
  width: 100%;
  padding: 5px;
  border-radius: 25px;
}

.cont::before {
  content: " ";
  background:#B7D4E1;
  width: 100px;
  height:40px;
  border-radius: 20px;
  position:absolute;
  top:5px;
  left:5px;
  transition: all 0.2s ease-out;
}

.choice {
  float: left;
  margin-right: 1px;
}

.choice button {
  color: #000;
  width: 100px;
  height:40px;
  border:0;
  display:inline-block;
  text-align: center;
  background: transparent;
  transition: all 0.4s linear;
  border-radius: 20px;
  position:relative;
}

.choice .cont.right::before {
  transform: translate3d(105px,0,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="convert">Convert to animated pill</button>
<form id="radios">
  <input type="radio" name="gender" value="male" data-display="Gentleman">
  <input type="radio" name="gender" value="female" data-display="Lady">
</form>