在Twitter启动3中切换类时的转换

Question

我正在使用Twitter引导程序3，并有一个包含图片或视频的DIV。div是class 3，但是使用jQuery，我会在悬停时切换那个类并使用class 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和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>

​