Оживляющего Twitter Bootstrap 3 отзывчивого изменение класса

Question

я страница Я настроил с помощью Twitter Bootstrap, у меня есть макет, как так:

<div class="container"> 
    <div class="row"> 
     <div id="col-1" class="col-xs-4"></div> 
     <div id="col-2" class="col-xs-8"></div> 
    </div> 
</div> 

и то, что я хотел бы сделать, это анимировать изменение ширина. То, что я первоначально пытался сделать анимацию изменения класса с JQuery UI, как так:

$(".btn").click(function() { 
    $("#col-1").switchClass("col-xs-4", "col-xs-1", 300); 
    $("#col-1").switchClass("col-xs-8", "col-xs-12", 300); 
}); 

, но это не сработало, ни малейшего представления о том, как сделать, чтобы это сделать?

Answer 1

не найти причину, почему ваш код не должен работать, смотрите также: http://bootply.com/101242

В своем коде вы используете $("#col-1").switchClass("col-xs-8", "col-xs-12", 300); это имеет col-1 в смену Col-2 в качестве селектора. col-1 не имеет класса col-xs-8, поэтому его нельзя отключить.

Answer 2

Ответить

это можно сделать анимированное Col-хз-0 - loriensleafs Dec 18 '13 в 15:01

Вместо создания Col-xs- 0 и изменение класса как под, как предложено Bass Jobsen

$("#col-1").switchClass("col-xs-8", "col-xs-0", 300); 

Вы можете просто сделать следующее

$("#col-1").hide(300); 

И будет работать, но это уборщик этот путь