CODEWITHSUNDEEP
jquery-uianimationtwitter-bootstrap-3
loriensleafs
loriensleafs

Reputation: 2255

Animating twitter bootstrap 3 responsive class change

I have a page I've set up using twitter bootstrap, I have a layout like so:

<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>

and what I'd like to do is animate a change in width. What I had originally tried to do was animate a class change with jquery ui like so:

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

but this didn't work, any idea on how do to do this?

Upvotes: 0

Views: 1614

Answers (2)

Glenn Van Schil
Glenn Van Schil

Reputation: 1099

Reply to

is it possible to make it animate to col-xs-0 – loriensleafs Dec 18 '13 at 15:01

Instead of creating a col-xs-0 and changing the class as beneath as suggested by Bass Jobsen

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

You could just do the following

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

Both will work but it's cleaner this way

Upvotes: 2

Bass Jobsen
Bass Jobsen

Reputation: 49044

I don't find a reason why your code shouldn't work, see also: http://bootply.com/101242

In your code you use $("#col-1").switchClass("col-xs-8", "col-xs-12", 300); this has col-1 in stead of col-2 as selector. col-1 doesn't have a col-xs-8 class, so can't switch this.

Upvotes: 0

Related Questions