Wednesday, 18 September 2013

jQuery Hide Class with Slide Transition

jQuery Hide Class with Slide Transition

I'm trying to collapse a vertical left bar with a slide transition. I
start with a larger width (250px), down to a smaller width (50px) toolbar
size.
I can hide/show the wide bar completely with a nice slide transition using:
$("#pnlLeftSide").hide('slide', {direction:'left'}, 300);
$("#pnlLeftSide").show('slide', {direction:'left'}, 300);
Or I can add a class to go from wide to mini, which basically hides a lot
of inner content and then displays a few smaller toolbar type things
using:
$("#pnlLeftSide").toggleClass("min");
But I can't go from wide to mini, with a nice smooth slide transition as
it collapses in size (width).
If I try this, it jerks at the end
$("#pnlLeftSide").hide('slide', {direction:'left'}, 300, function() {
$(this).addClass("min"); });
$("#pnlLeftSide").show('slide', {direction:'left'}, 300, function() {
$(this).removeClass("min"); });
Any ideas?

No comments:

Post a Comment