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>

在Twitter Bootstrap 3中切换类时的转换

2 个答案: