[jQuery] Re: removeClass() fires before anything else in a series of functions when I need it to fire last.

2010-01-05 Thread Johan Borestad
Hi!
This is due to that the fadeOut function is asynchronous (and that's a
good thing, otherwise the entire browser would freeze while
animating). To solve your problem you could use a callback. That's a
second parameter to the fadeOut method as a anonymous function
http://docs.jquery.com/Effects/fadeOut

$("#notice").fadeOut(800, function(){
   $("#notice-tab").removeClass('active-notice');
});

The method will now remove the active-notice class afterwards.

/ Johan


On Jan 5, 11:25 pm, Kinsbane  wrote:
> er, jeez I'm sorry - i don't know how to format code on Google Groups :
> (
>
> On Jan 5, 2:21 pm, Kinsbane  wrote:
>
> > So, there's a main column of content and to the left of the main
> > column is an A element that is absolutely positioned.
>
> > I have an announcement system that when there's an active
> > announcement, a box is rendered above the main column, pushing the
> > main column down. However, the A element that is absolutely positioned
> > stays where it is.
>
> > I added code to check for an active announcement and add a class to
> > the A element so it'll keep it positioned alongside the left-border of
> > the main column.
>
> > When a user closes the announcement box, it fades out, and the main
> > column moves back up to fill the space - but the positioned A element
> > does not follow. I then added code to the function I had to fade out
> > the box and save a cookie to show the user had closed the active
> > announcement box which removed the active-announcement class I had PHP
> > add to the A element.
> > The problem is, even though the removeClass() function is last in the
> > series of functions, it fires first - the positioned A element moves
> > up to where it should be BEFORE the active announcement box fades out.
>
> > How can I change this so that the positioned A element has its class
> > removed after the other two things have taken place?
>
> > Here's the jQuery code I have:
> > [code]
> > $("#close-notice").click(function(){
>
> >                                         $("#notice").fadeOut(800);
> >                                         createCookie('t3d_notice', 
> > 't3dnotice_
> > >', 365);
>
> >                                         
> > $("#notice-tab").removeClass('active-notice');
>
> >                                 }
> >                                 );
> > [/code]


[jQuery] Re: removeClass() fires before anything else in a series of functions when I need it to fire last.

2010-01-05 Thread Kinsbane
er, jeez I'm sorry - i don't know how to format code on Google Groups :
(

On Jan 5, 2:21 pm, Kinsbane  wrote:
> So, there's a main column of content and to the left of the main
> column is an A element that is absolutely positioned.
>
> I have an announcement system that when there's an active
> announcement, a box is rendered above the main column, pushing the
> main column down. However, the A element that is absolutely positioned
> stays where it is.
>
> I added code to check for an active announcement and add a class to
> the A element so it'll keep it positioned alongside the left-border of
> the main column.
>
> When a user closes the announcement box, it fades out, and the main
> column moves back up to fill the space - but the positioned A element
> does not follow. I then added code to the function I had to fade out
> the box and save a cookie to show the user had closed the active
> announcement box which removed the active-announcement class I had PHP
> add to the A element.
> The problem is, even though the removeClass() function is last in the
> series of functions, it fires first - the positioned A element moves
> up to where it should be BEFORE the active announcement box fades out.
>
> How can I change this so that the positioned A element has its class
> removed after the other two things have taken place?
>
> Here's the jQuery code I have:
> [code]
> $("#close-notice").click(function(){
>
>                                         $("#notice").fadeOut(800);
>                                         createCookie('t3d_notice', 
> 't3dnotice_
> >', 365);
>
>                                         
> $("#notice-tab").removeClass('active-notice');
>
>                                 }
>                                 );
> [/code]