切換通過jQuery的寬度動畫引導類

Question

如何同時從"col-lg-8"改變透過jQuery的一個DIV的類"col-lg-12"

這裏申請動畫的，我使用更改類名jQuery代碼行，我只是就像寬度擴展的動畫在類名更改時發生一樣。

$(".slide-content").toggleClass("col-sm-8 col-sm-12"); 

Answer 1

您可以使用css3 transition做到這一點像

$(window).load(function() { 
 
    $('button').click(function() { 
 
    $(".slide-content").toggleClass("col-sm-8 col-sm-12"); 
 
    }) 
 
});

.slide-content { 
 
    background-color: lightgrey; 
 
    transition: all 2s; 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css"> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css"> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="slide-content col-sm-8">asdfasd</div> 
 
    </div> 
 
    <button>Test</button> 
 
</div>

演示：Fiddle