我有以下代码:
HTML
<div class="container-fluid">
<div class="row-fluid">
<div id="col2" class="span0"></div>
<div id="col1" class="span12">
<a id="trig" class="btn btn-inverse">Reflow Me</a>
</div>
</div>
</div>
CSS
.row-fluid div {
height: 200px;
-webkit-transition: width 0.3s ease, margin 0.3s ease;
-moz-transition: width 0.3s ease, margin 0.3s ease;
-o-transition: width 0.3s ease, margin 0.3s ease;
transition: width 0.3s ease, margin 0.3s ease;
}
.row-fluid .span0 {
width: 0%;
}
#col1 {
background-color: #A6BFBA;
}
#col2 {
background-color: #DE4124;
}
#trig {
margin: 50px;
}
.row-fluid .span0 + [class*="span"]{
margin-left: 0;
}
JS
$('#trig').on('click', function () {
$('#col1').toggleClass('span12 span3');
$('#col2').toggleClass('span0 span9');
});
如何在Bootstrap 3.0中为幻灯片切换设置上面的确切代码?
答案 0 :(得分:4)
$('#trig').on('click', function () {
$('#trig').fadeOut(function(){
$('#col1').toggleClass('col-xs-12 col-xs-3');
if($('#trig').css('margin-left') == '-100px')
$('#trig').css('margin-left','50px');
else
$('#trig').css('margin-left','-100px');
if($('#col2').hasClass('col-xs-1')){
setTimeout(function(){
$('#col2').toggleClass('col-xs-1 col-xs-9');
},25);
}
else {
$('#col2').toggleClass('col-xs-1 col-xs-9');
}
$('#trig').fadeIn();
});
});
这就是我能想到的。