[jQuery] Re: Wait until animation completed - callback?

2009-09-26 Thread ryan.j

But he will still want to trigger the animation on mouseover of that
second unspecified element at some point after initiating the previous
animation, regardless of the existence of $('.slide_started') or just
using the :animated selector.

At that point he will be forced to throw in a timer of some kind,
because the previous animation (and it's callback) will already be
well underway so he can't retrospectively add the new animation into
the previous one's callback, he can only start executing new code from
that point.
waiting isn't great but it seems to be all you can do without
investing a fair chunk of resources. i'll post if i can knock up some
code that lets you interrupt a callback properly, i have an idea how
it can be done but it ain't pretty.

On Sep 25, 10:09 pm, William Chang diehardb...@gmail.com wrote:
 I don't know how complex the user interface you're making, but if
 you're asking for a callback after completing the slideToggle()
 animation, then overload the method with a second argument which is
 the callback function.

 $('#51').slideToggle('fast, function() {
     // Do something after element's animation completes.

 });

 If you're dealing with multiple items with animation and don't want
 them to overlap the animation, then try using jQuery to manipulate the
 class attribute to store the state (e.g. slide_started,
 slide_ended). I don't think using the timeout is the best way.

 Good Luck,
 William Changhttp://www.williamchang.orghttp://www.babybluebox.com

 On Sep 25, 4:23 pm, Merlin ngro...@fastmail.fm wrote:

  The timeout sounds logical. I would like to try it, but somehow jquery
  does not know that 
  function:http://docs.jquery.com/Special:Search?ns0=1search=setTimeoutgo=

  I am pretty new to jquery. Could you post some code that fits into
  this one:
  onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
  (#51)').hide(700);

  Thanks!!

  On Sep 25, 4:42 pm, ryan.j ryan.joyce...@googlemail.com wrote:

   the problem with jquery animation effects is that you can easily chain
   effects on a single element, but unless you specify a timer of some
   description or utilise the callback, effects on different elements
   will execute simultaneously as you're finding.

   unfortunately you really aren't going to know how far into the
   animation it is (you can find out by checking the opacity of the el,
   but that's probably A Very Bad Idea) so whilst it seems like the most
   obvious method, if you want to just stop  the new mouseover func
   executing until the animation has finished you'd need to make the
   mouseover function setTimeout(yourActualFunction(+el.attr('id')+),
   x)  where x is the max length the anim could be.

   you might be able to do something clever with a conditional to
   determine if there was a menu animation happening on the initial
   mouseover event, and if there was checking the element now under the
   cursor in the callback, but since you have limited access to the
   callback of any existing events in progress you're always going to hit
   the problem of not being able to fully utilise that.

   i'd be tempted to .stop() anything that's :animated on mouseover
   before you start the new .fadeTo()   ;)

   On Sep 25, 2:12 pm,Merlinngro...@fastmail.fm wrote:

does nobody have an idea? :-(

On Sep 23, 5:13 pm,Merlinngro...@fastmail.fm wrote:

 Hi there,

 I am building huge list with subcategories in each category that fade
 out once the mouse is placed over the category. It works great, BUT
 the problem is, if your mouse goes down the list vertically and the
 subcategories are fiew, then the obove subcategories fade out and your
 mouse is over the next category which is causing the next menu to fade
 in.

 I would need a way to make jquerywaitto fade out the next menüuntil
 the last one has disapeared. An area would be good, if the mouse
 leaves the subcategory area fade out or similar.

 Do you believe the callback function might be a solution? I could not
 think about how. Here is the code I am using:
 onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
 (#51)').hide(700);

 Thank you for any help!!

Merlin


[jQuery] Re: Wait until animation completed - callback?

2009-09-26 Thread ryan.j

Here is some code that more or less does what the OP wanted by
intercepting the callback. It's just a proof of concept i found was
vaguely interesting coming up with, so for god's sake don't actually
use it for anything (it's bad coding and highly likely to break
anyway!)

http://jsbin.com/isugi

On Sep 26, 7:08 pm, ryan.j ryan.joyce...@googlemail.com wrote:
 But he will still want to trigger the animation on mouseover of that
 second unspecified element at some point after initiating the previous
 animation, regardless of the existence of $('.slide_started') or just
 using the :animated selector.

 At that point he will be forced to throw in a timer of some kind,
 because the previous animation (and it's callback) will already be
 well underway so he can't retrospectively add the new animation into
 the previous one's callback, he can only start executing new code from
 that point.
 waiting isn't great but it seems to be all you can do without
 investing a fair chunk of resources. i'll post if i can knock up some
 code that lets you interrupt a callback properly, i have an idea how
 it can be done but it ain't pretty.

 On Sep 25, 10:09 pm, William Chang diehardb...@gmail.com wrote:

  I don't know how complex the user interface you're making, but if
  you're asking for a callback after completing the slideToggle()
  animation, then overload the method with a second argument which is
  the callback function.

  $('#51').slideToggle('fast, function() {
      // Do something after element's animation completes.

  });

  If you're dealing with multiple items with animation and don't want
  them to overlap the animation, then try using jQuery to manipulate the
  class attribute to store the state (e.g. slide_started,
  slide_ended). I don't think using the timeout is the best way.

  Good Luck,
  William Changhttp://www.williamchang.orghttp://www.babybluebox.com

  On Sep 25, 4:23 pm, Merlin ngro...@fastmail.fm wrote:

   The timeout sounds logical. I would like to try it, but somehow jquery
   does not know that 
   function:http://docs.jquery.com/Special:Search?ns0=1search=setTimeoutgo=

   I am pretty new to jquery. Could you post some code that fits into
   this one:
   onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
   (#51)').hide(700);

   Thanks!!

   On Sep 25, 4:42 pm, ryan.j ryan.joyce...@googlemail.com wrote:

the problem with jquery animation effects is that you can easily chain
effects on a single element, but unless you specify a timer of some
description or utilise the callback, effects on different elements
will execute simultaneously as you're finding.

unfortunately you really aren't going to know how far into the
animation it is (you can find out by checking the opacity of the el,
but that's probably A Very Bad Idea) so whilst it seems like the most
obvious method, if you want to just stop  the new mouseover func
executing until the animation has finished you'd need to make the
mouseover function setTimeout(yourActualFunction(+el.attr('id')+),
x)  where x is the max length the anim could be.

you might be able to do something clever with a conditional to
determine if there was a menu animation happening on the initial
mouseover event, and if there was checking the element now under the
cursor in the callback, but since you have limited access to the
callback of any existing events in progress you're always going to hit
the problem of not being able to fully utilise that.

i'd be tempted to .stop() anything that's :animated on mouseover
before you start the new .fadeTo()   ;)

On Sep 25, 2:12 pm,Merlinngro...@fastmail.fm wrote:

 does nobody have an idea? :-(

 On Sep 23, 5:13 pm,Merlinngro...@fastmail.fm wrote:

  Hi there,

  I am building huge list with subcategories in each category that 
  fade
  out once the mouse is placed over the category. It works great, BUT
  the problem is, if your mouse goes down the list vertically and the
  subcategories are fiew, then the obove subcategories fade out and 
  your
  mouse is over the next category which is causing the next menu to 
  fade
  in.

  I would need a way to make jquerywaitto fade out the next menüuntil
  the last one has disapeared. An area would be good, if the mouse
  leaves the subcategory area fade out or similar.

  Do you believe the callback function might be a solution? I could 
  not
  think about how. Here is the code I am using:
  onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
  (#51)').hide(700);

  Thank you for any help!!

 Merlin


[jQuery] Re: Wait until animation completed - callback?

2009-09-25 Thread Merlin

does nobody have an idea? :-(



On Sep 23, 5:13 pm, Merlin ngro...@fastmail.fm wrote:
 Hi there,

 I am building huge list with subcategories in each category that fade
 out once the mouse is placed over the category. It works great, BUT
 the problem is, if your mouse goes down the list vertically and the
 subcategories are fiew, then the obove subcategories fade out and your
 mouse is over the next category which is causing the next menu to fade
 in.

 I would need a way to make jquerywaitto fade out the next menüuntil
 the last one has disapeared. An area would be good, if the mouse
 leaves the subcategory area fade out or similar.

 Do you believe the callback function might be a solution? I could not
 think about how. Here is the code I am using:
 onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
 (#51)').hide(700);

 Thank you for any help!!

 Merlin


[jQuery] Re: Wait until animation completed - callback?

2009-09-25 Thread ryan.j

the problem with jquery animation effects is that you can easily chain
effects on a single element, but unless you specify a timer of some
description or utilise the callback, effects on different elements
will execute simultaneously as you're finding.

unfortunately you really aren't going to know how far into the
animation it is (you can find out by checking the opacity of the el,
but that's probably A Very Bad Idea) so whilst it seems like the most
obvious method, if you want to just stop  the new mouseover func
executing until the animation has finished you'd need to make the
mouseover function setTimeout(yourActualFunction(+el.attr('id')+),
x)  where x is the max length the anim could be.

the nearest solution to what you want sounds like it would be using a
conditional statement to determine if there was a menu animation
happening on the initial mouseover event, and if there was checking
the element now under the cursor in the callback.

i'd be tempted to .stop() anything that's :animated on mouseover
before you start the new .fadeTo()   ;)

On Sep 25, 2:12 pm, Merlin ngro...@fastmail.fm wrote:
 does nobody have an idea? :-(

 On Sep 23, 5:13 pm, Merlin ngro...@fastmail.fm wrote:

  Hi there,

  I am building huge list with subcategories in each category that fade
  out once the mouse is placed over the category. It works great, BUT
  the problem is, if your mouse goes down the list vertically and the
  subcategories are fiew, then the obove subcategories fade out and your
  mouse is over the next category which is causing the next menu to fade
  in.

  I would need a way to make jquerywaitto fade out the next menüuntil
  the last one has disapeared. An area would be good, if the mouse
  leaves the subcategory area fade out or similar.

  Do you believe the callback function might be a solution? I could not
  think about how. Here is the code I am using:
  onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
  (#51)').hide(700);

  Thank you for any help!!

  Merlin


[jQuery] Re: Wait until animation completed - callback?

2009-09-25 Thread ryan.j

the problem with jquery animation effects is that you can easily chain
effects on a single element, but unless you specify a timer of some
description or utilise the callback, effects on different elements
will execute simultaneously as you're finding.

unfortunately you really aren't going to know how far into the
animation it is (you can find out by checking the opacity of the el,
but that's probably A Very Bad Idea) so whilst it seems like the most
obvious method, if you want to just stop  the new mouseover func
executing until the animation has finished you'd need to make the
mouseover function setTimeout(yourActualFunction(+el.attr('id')+),
x)  where x is the max length the anim could be.

you might be able to do something clever with a conditional to
determine if there was a menu animation happening on the initial
mouseover event, and if there was checking the element now under the
cursor in the callback, but since you have limited access to the
callback of any existing events in progress you're always going to hit
the problem of not being able to fully utilise that.

i'd be tempted to .stop() anything that's :animated on mouseover
before you start the new .fadeTo()   ;)

On Sep 25, 2:12 pm, Merlin ngro...@fastmail.fm wrote:
 does nobody have an idea? :-(

 On Sep 23, 5:13 pm, Merlin ngro...@fastmail.fm wrote:

  Hi there,

  I am building huge list with subcategories in each category that fade
  out once the mouse is placed over the category. It works great, BUT
  the problem is, if your mouse goes down the list vertically and the
  subcategories are fiew, then the obove subcategories fade out and your
  mouse is over the next category which is causing the next menu to fade
  in.

  I would need a way to make jquerywaitto fade out the next menüuntil
  the last one has disapeared. An area would be good, if the mouse
  leaves the subcategory area fade out or similar.

  Do you believe the callback function might be a solution? I could not
  think about how. Here is the code I am using:
  onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
  (#51)').hide(700);

  Thank you for any help!!

  Merlin


[jQuery] Re: Wait until animation completed - callback?

2009-09-25 Thread Merlin

The timeout sounds logical. I would like to try it, but somehow jquery
does not know that function:
http://docs.jquery.com/Special:Search?ns0=1search=setTimeoutgo=

I am pretty new to jquery. Could you post some code that fits into
this one:
onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
(#51)').hide(700);

Thanks!!

On Sep 25, 4:42 pm, ryan.j ryan.joyce...@googlemail.com wrote:
 the problem with jquery animation effects is that you can easily chain
 effects on a single element, but unless you specify a timer of some
 description or utilise the callback, effects on different elements
 will execute simultaneously as you're finding.

 unfortunately you really aren't going to know how far into the
 animation it is (you can find out by checking the opacity of the el,
 but that's probably A Very Bad Idea) so whilst it seems like the most
 obvious method, if you want to just stop  the new mouseover func
 executing until the animation has finished you'd need to make the
 mouseover function setTimeout(yourActualFunction(+el.attr('id')+),
 x)  where x is the max length the anim could be.

 you might be able to do something clever with a conditional to
 determine if there was a menu animation happening on the initial
 mouseover event, and if there was checking the element now under the
 cursor in the callback, but since you have limited access to the
 callback of any existing events in progress you're always going to hit
 the problem of not being able to fully utilise that.

 i'd be tempted to .stop() anything that's :animated on mouseover
 before you start the new .fadeTo()   ;)

 On Sep 25, 2:12 pm,Merlinngro...@fastmail.fm wrote:

  does nobody have an idea? :-(

  On Sep 23, 5:13 pm,Merlinngro...@fastmail.fm wrote:

   Hi there,

   I am building huge list with subcategories in each category that fade
   out once the mouse is placed over the category. It works great, BUT
   the problem is, if your mouse goes down the list vertically and the
   subcategories are fiew, then the obove subcategories fade out and your
   mouse is over the next category which is causing the next menu to fade
   in.

   I would need a way to make jquerywaitto fade out the next menüuntil
   the last one has disapeared. An area would be good, if the mouse
   leaves the subcategory area fade out or similar.

   Do you believe the callback function might be a solution? I could not
   think about how. Here is the code I am using:
   onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
   (#51)').hide(700);

   Thank you for any help!!

  Merlin


[jQuery] Re: Wait until animation completed - callback?

2009-09-25 Thread William Chang

I don't know how complex the user interface you're making, but if
you're asking for a callback after completing the slideToggle()
animation, then overload the method with a second argument which is
the callback function.

$('#51').slideToggle('fast, function() {
// Do something after element's animation completes.
});

If you're dealing with multiple items with animation and don't want
them to overlap the animation, then try using jQuery to manipulate the
class attribute to store the state (e.g. slide_started,
slide_ended). I don't think using the timeout is the best way.

Good Luck,
William Chang
http://www.williamchang.org
http://www.babybluebox.com

On Sep 25, 4:23 pm, Merlin ngro...@fastmail.fm wrote:
 The timeout sounds logical. I would like to try it, but somehow jquery
 does not know that 
 function:http://docs.jquery.com/Special:Search?ns0=1search=setTimeoutgo=

 I am pretty new to jquery. Could you post some code that fits into
 this one:
 onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
 (#51)').hide(700);

 Thanks!!

 On Sep 25, 4:42 pm, ryan.j ryan.joyce...@googlemail.com wrote:



  the problem with jquery animation effects is that you can easily chain
  effects on a single element, but unless you specify a timer of some
  description or utilise the callback, effects on different elements
  will execute simultaneously as you're finding.

  unfortunately you really aren't going to know how far into the
  animation it is (you can find out by checking the opacity of the el,
  but that's probably A Very Bad Idea) so whilst it seems like the most
  obvious method, if you want to just stop  the new mouseover func
  executing until the animation has finished you'd need to make the
  mouseover function setTimeout(yourActualFunction(+el.attr('id')+),
  x)  where x is the max length the anim could be.

  you might be able to do something clever with a conditional to
  determine if there was a menu animation happening on the initial
  mouseover event, and if there was checking the element now under the
  cursor in the callback, but since you have limited access to the
  callback of any existing events in progress you're always going to hit
  the problem of not being able to fully utilise that.

  i'd be tempted to .stop() anything that's :animated on mouseover
  before you start the new .fadeTo()   ;)

  On Sep 25, 2:12 pm,Merlinngro...@fastmail.fm wrote:

   does nobody have an idea? :-(

   On Sep 23, 5:13 pm,Merlinngro...@fastmail.fm wrote:

Hi there,

I am building huge list with subcategories in each category that fade
out once the mouse is placed over the category. It works great, BUT
the problem is, if your mouse goes down the list vertically and the
subcategories are fiew, then the obove subcategories fade out and your
mouse is over the next category which is causing the next menu to fade
in.

I would need a way to make jquerywaitto fade out the next menüuntil
the last one has disapeared. An area would be good, if the mouse
leaves the subcategory area fade out or similar.

Do you believe the callback function might be a solution? I could not
think about how. Here is the code I am using:
onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
(#51)').hide(700);

Thank you for any help!!

   Merlin