点击后台滑动？

Question

我在div中有2个锚链接，现在我希望当我点击一个时，背景切换应该是动画的。

我想要一些像单选按钮滑动的东西。

＆＃13;

＆＃13;

$('.wrap').find('a').click(function(){
  $('.wrap a').removeClass('active');
  $(this).addClass('active')
});

＆＃13;

* {
    margin: 0;
    padding: 0;
}

.wrap {
    width: 150px;
    margin: 20px auto;
    border-radius: 40px;
}

.wrap a {
    width: 75px;
    border: 1px solid #4385F5;
    float: left;
    box-sizing: border-box;
    padding-bottom: 10px;
    text-align: center;
    text-decoration: none;
    color: #4385F5;
    position: relative;
}

.wrap a.active {
    background: #4385F5;
    color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="wrap">
    <a class="active" href="javascript:void(0)">
        This
    </a>
    <a href="javascript:void(0)">
        That
    </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

$('.wrap').find('a').click(function(){
  $('.wrap a').removeClass('active');
  $(this).addClass('active')
});

＆＃13;

* {
    margin: 0;
    padding: 0;
}

.wrap {
    width: 150px;
    margin: 20px auto;
    border-radius: 40px;
}

.wrap a {
    width: 75px;
    border: 1px solid #4385F5;
    float: left;
    box-sizing: border-box;
    padding-bottom: 10px;
    text-align: center;
    text-decoration: none;
    color: #4385F5;
    position: relative;
    transition: all 0.5s;
}

.wrap a.active {
    background: #4385F5;
    color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="wrap">
    <a class="active" href="javascript:void(0)">
        This
    </a>
    <a href="javascript:void(0)">
        That
    </a>
</div>

＆＃13;

＆＃13;

＆＃13;

你想要什么样的动画？

如果您想要淡化动画，请尝试使用transition

＆＃13;

＆＃13;

input[name="radio"]{
  display: none;
}

.wrap{
  position: relative;
  display: inline-block;
  width: 110px;
  height: 40px;
  border: 1px solid black;
}

label{
  display: inline-block;
  position: relative;
  text-align: center;
  width: 50px;
  line-height: 40px;
  color: red;
  z-index: 5;
  cursor: pointer;
}
#radio-1:checked ~ .slide{
  position: absolute;
  top:0;
  left: 0;
  width: 55px;
  height: 40px;
  background: black;
  z-index: 4;
}
#radio-2:checked ~ .slide{
  position: absolute;
  top:0;
  left: 55px;
  width: 55px;
  height: 40px;
  background: black;
  z-index: 4;
  
}
.slide{
  transition: all 1s;
}

＆＃13;

<div class="wrap">
 
  <input type="radio" name="radio" id="radio-1" checked/>
  <label for="radio-1">This</label>
  <input type="radio" name="radio" id="radio-2"/>
  <label for="radio-2">That</label>
   <span class="slide"></span>

</div>

＆＃13;

＆＃13;

＆＃13;