Interesting I have figured out the reason why your example didn't work(and
now does). It doesn't work when you have elements in the array which don't
need animation/are in the same state initially as the final animation state.

So I now have an active class indicating it's state and the selector I use
is now 'div.mainLiner div.active'

Thanks a lot for your help. This thread is now solved.

Cheers,
Cam

On Sat, Jan 3, 2009 at 1:18 PM, Ricardo Tomasi <ricardob...@gmail.com>wrote:

>
> Strange. In my tests the last element's callback was always called
> last. jQuery's animations are time-based, that means both animations
> should end at the same time, with a small offset for the last element
> at most.
>
> Anyway, you already have a solution. I had first rewritten yours
> before trying the other way, with each() you get the element's index
> "for free".
>
> function closeMainPanels(callback){
>    var panels = jQuery('div.mainLiner div.panel');
>     var last = panels.length-1;
>    panels.each(function(index){
>         jQuery(this).slideUp(750, function(){
>             if (index == last){
>                callback();
>            }
>        });
>    });
> }
>
> cheers,
> - ricardo
>
> On Jan 2, 8:52 pm, "Cam Spiers" <camspi...@gmail.com> wrote:
> > Thats cool thanks Brian and Ricardo for your time.
> >
> > Ricardo that did look really good but it doesn't work for me.
> >
> > jQuery("div.mainLiner div.panel").not(':last')
> > .slideUp(750, function(){
> > console.log("not last");}).end()
> >
> > .filter(':last')
> > .slideUp(750, function(){
> > console.log("last");
> > //callback}
> >
> > );
> >
> > This in FF in my situation this produces in the firebug console:
> > last
> > not last
> > not last
> >
> > Really unusual.
> > This has the same problem that the callback function is not actually
> being
> > called after the finish of all animations.
> >
> > Cheers,
> > Cam
> >
> > On Fri, Jan 2, 2009 at 7:14 PM, Ricardo Tomasi <ricardob...@gmail.com
> >wrote:
> >
> >
> >
> > > You're right, that will run the callback once for each element. This
> > > is a bit hacky but is the shortest way I could think of:
> >
> > > function closeMainPanels(){
> > >    jQuery("div.mainLiner div.panel").not(':last').slideUp(750).end()
> > >    .filter(':last').slideUp(750, function(){
> > >            //callback
> > >    })
> > > };
> >
> > > On Jan 2, 1:15 am, "Cam Spiers" <camspi...@gmail.com> wrote:
> > > > They are all sliding up at the same time, but I was under the
> impression
> > > > that your code would call the callback function once for each
> div.panel
> > > that
> > > > was found. Am I mistaken?
> > > > (would be really awesome if it does only call once)
> >
> > > > And if I'm not, I reiterate that I only want the callback function
> called
> > > > once, and it needs to be called after all of the panels have finished
> > > > animation.
> >
> > > > The reason for this is that I am doing a ajax PUT form submission
> that
> > > > updates a Members account and then returns the updated DOM section.
> Then
> > > I
> > > > replace the old DOM section with the new piece after all of the open
> > > panels
> > > > (which display the content which is about to be replaced) are closed.
> >
> > > > Cheers.
> >
> > > > On Fri, Jan 2, 2009 at 2:43 PM, Ricardo Tomasi <
> ricardob...@gmail.com
> > > >wrote:
> >
> > > > > If they are all sliding up at the same time, isn't it simpler to
> use
> >
> > > > > function closeMainPanels(){
> > > > >    jQuery("div.mainLiner div.panel").slideUp(750, function(){ /
> > > > > *...callback...*/ });
> > > > > }
> >
> > > > > On Jan 1, 5:53 pm, "Cam Spiers" <camspi...@gmail.com> wrote:
> > > > > > function closeMainPanels(callback){
> > > > > >     var panels = jQuery('div.mainLiner div.panel');
> > > > > >     var done = [];
> > > > > >     var length = panels.length;
> > > > > >     panels.each(function(){
> > > > > >         var panel = jQuery(this);
> > > > > >         panel.slideUp(750, function(){
> > > > > >             if (done.push(panel) == length){
> > > > > >                 callback();
> > > > > >             }
> > > > > >         });
> > > > > >     });
> >
> > > > > > }
> >
> > > > > > This is what I ended up using thanks brian. :)
> >
> > > > > > Cheers,
> > > > > > Cam
> >
> > > > > > On Thu, Jan 1, 2009 at 5:26 PM, Cam Spiers <camspi...@gmail.com>
> > > wrote:
> > > > > > > Hey,
> >
> > > > > > > function closeMainPanels(){
> > > > > > >     jQuery("div.mainLiner div.panel").each(function(){
> > > > > > >         jQuery(this).slideUp(750);
> > > > > > >     });
> > > > > > > }
> >
> > > > > > > How can I tell when all panels have finished animation?
> >
> > > > > > > As I need to call another function when all have finished.
> >
> > > > > > > Cheers,
> > > > > > > Cam
>

Reply via email to