Переключить ширину анимации через JQuery, применяя класс начальной загрузки

Question

Как применить анимацию при изменении CLASS A Div через JQuery из "col-lg-8" в "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