Question

I am animating the reduction of a <section>‘s width from a fluid .span12 to match the width of .span3.
How I’m currently doing it is:

$('#searchPanel').animate({width: '23.404255317%'}, 400);
$('#searchPanel').removeClass('span12');
$('#searchPanel').addClass('span3');

Problem is, the width set in the animation is overriding the .span3 class. Which is messing up some responsive stuff I have going on.

How do I get rid of that width after animating it? I know that jquery ui has .switchclass but I’m thinking I’m just doing this in a dumb way and should know how to do things like this…

Thank you!

Update:
It might not be the best solution, but I got it to work by adding a callback and removing the ‘Style’ Attribute:

$('#searchPanel').animate({width: '23.404255317%'}, 400, 'swing', function () {
    $(this).removeAttr('style').removeClass('span12').addClass('span3');
 } );

Answer 1

Have you tried

$('#searchPanel')
.animate({width: '23.404255317%'}, 400)
.removeClass('span12')
.addClass('span3')
.removeAttr('width');

Also, remember to search only once for the element $(‘#searchPanel”) and then chain the others methods.