在 Twitter Bootstrap 3 中切换类时的过渡

Question

我正在使用Twitter Bootstrap 3，并且有一个包含图片或视频的DIV。div 是 col-sm-3，但使用 jQuery 我在悬停时用 col-sm-12 切换该类。有没有办法在调整大小时进行更平滑的过渡并添加一些效果？谢谢。

Answer 1

尝试 CSS 过渡以获得良好的性能：

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

http://jsfiddle.net/cm3oc7vh/

Answer 2

你可以始终使用 jQuery-UI 和 switchClass 方法。这将对样式的差异进行动画处理。

$(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" rel="stylesheet"/>
<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>