Transition When Switching Classes In Twitter Bootstrap 3

I'm using Twitter Bootstrap 3 and have a DIV containing a picture or video. the div is col-sm-3, but using a jQuery I switch that class with a col-sm-12 on hover. Is there any way

Solution 1:

Try CSS transitions for good performance:

.col-sm-3, .col-sm-12{
    transition: all 200ms; //replace 200ms with time of your choice
}

http://jsfiddle.net/cm3oc7vh/

Solution 2:

You could always use jQuery-UI and the switchClass method. This will animate the difference in styles.

$(function($){
    $('#switch').on('click',function(e){
        var $p = $('#target')
        if($p.is('.foo')){
            $p.switchClass('foo','bar',1000);
        }else{
            $p.switchClass('bar','foo',1000);
        }
        e.preventDefault();
    });
});

.foo { color: red; font-size: 150%; }
.bar { color: blue; font-size: 100%; }

<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<p id="target" class="foo">Hello, world!</p>
<button id="switch">Switch</button>