點擊後背景輕掃？

Question

我在一個div中有2個錨鏈接，現在我希望當我點擊一個時，背景切換應該是動畫。

我想要單選按鈕滑動。

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

* { 
 
    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; 
 
}

<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>

Answer 1

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

* { 
 
    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; 
 
}

<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>

你想要什麼樣的動畫片？

如果你想淡出的動畫，嘗試使用transition

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; 
 
}

<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>