Jquery Bootstrap 3.0中列的滑动切换

我有以下代码：

HTML

JS

---

在Bootstrap3.0中，您如何使上面的精确代码适用于幻灯片切换？

哈哈。。那很有趣。。经过多次尝试，我想出了一些办法，但这种转变仍然很难看。使用bootstrap 3的行中的跨距之间不再有边距。无论如何，30分钟后，一些可怕的代码如下

$('#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();             
  });
});

这就是我能想到的

.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;
}

$('#trig').on('click', function () {
    $('#col1').toggleClass('span12 span3');
    $('#col2').toggleClass('span0 span9');
});

$('#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();             
  });
});