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
