[jQuery] Re: .animate() queue without pause between animations

[Miloš Rašić]

Thanks a lot to you and Karl for help. The animation works smoothly now. I
had to switch to animating without queue and using setTimeout for the second
rotation. It would be nice if jQuery would provide some functionality to the
queues where we could choose if we want a pause between animations and how
long it should be.

On Tue, Jan 13, 2009 at 11:05 PM, Nikola nik.cod...@gmail.com wrote:


 What about doing something similar to what Karl Swedberg did in his
 animated scrolling example?

 http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12

[jQuery] Re: .animate() queue without pause between animations

[Miloš Rašić]

I don't think so. The number of pixels is not a fixed number between the
positions in the menu. There are 5 icons and 5 positions, so I use an array
of 5 objects that contain css properties(left, top, zIndex, width, height
and opacity) of each position. The problem with calling .animate() once is
that each icon has to move through an adjacent position before moving on to
the destination. If I call .animate() only once with the final destination,
it will move in a direct line which is not a desired effect.
On Wed, Jan 14, 2009 at 5:52 AM, Karl Swedberg k...@englishrules.comwrote:

 Is it possible to have a variable for the number of pixels by which the
 menu animates (and doubling it when necessary), rather than calling animate
 twice?
 Also, .animate() is part of jQuery core, so you've posted to the correct
 group. ;-)

 --Karl

 
 Karl Swedberg
 www.englishrules.com
 www.learningjquery.com




 On Jan 13, 2009, at 4:29 PM, Miloš Rašić wrote:

 Here's the function I use to rotate the menu:
 http://paste.pocoo.org/show/99509/
 The icons are located inside divs with ids 'pos_1' through 'pos_5', 'pos_1'
 being the leftmost icon, and 'pos_5' being the rightmost icon. The all have
 class 'pos'.

 The problematic case occurs when the user clicks on 'pos_1' or 'pos_5' and
 the menu has to be rotated by 2 steps. rotate() is then called twice, and so
 the call to .animate() is executed twice for each div. I can't use a single
 call to .animate() because then the divs would jump directly to their final
 destination instead of passing through adjacent positions.

 I've tried the following alternatives:

 1) Using queue: false and using the second call with setTimeout so that it
 is executed just before the first animation completes.

 2) Using queue: true as in original code but calling .stop() a fraction of
 a second before the first animation completes on its own so that it is
 interrupted and the second animation in the queue starts immediately.

 3) Putting the second call to .animate() in the callback function of the
 first animate.

 All of these alternatives produced exactly the same results as the original
 code. The rotating menu makes a noticeable pause after the first animation
 before proceeding with the second.

 On Tue, Jan 13, 2009 at 8:20 PM, Nikola nik.cod...@gmail.com wrote:


 It's hard to tell without having a look at the code.  You may want to
 try http://paste.pocoo.org to post code like this.

 Are you chaining the animations? ie. $(this).animate({},speed).animate
 ({},speed).animate({},speed);

 You could always try setting a delay on your second animation with
 setTimeout.

 setTimeout ('$(this).animate({},speed)', 400);

 Hope that helps.
 Nikola

[jQuery] Re: .animate() queue without pause between animations

[Nikola]

It's hard to tell without having a look at the code.  You may want to
try http://paste.pocoo.org to post code like this.

Are you chaining the animations? ie. $(this).animate({},speed).animate
({},speed).animate({},speed);

You could always try setting a delay on your second animation with
setTimeout.

setTimeout ('$(this).animate({},speed)', 400);

Hope that helps.
Nikola

[jQuery] Re: .animate() queue without pause between animations

[Nikola]

Also, you might want to try posting questions like this one in the
jQuery UI group as .animate is part of jQuery UI.
http://groups.google.com/group/jquery-ui?hl=enpli=1

[jQuery] Re: .animate() queue without pause between animations

[Miloš Rašić]

Here's the function I use to rotate the menu:
http://paste.pocoo.org/show/99509/
The icons are located inside divs with ids 'pos_1' through 'pos_5', 'pos_1'
being the leftmost icon, and 'pos_5' being the rightmost icon. The all have
class 'pos'.

The problematic case occurs when the user clicks on 'pos_1' or 'pos_5' and
the menu has to be rotated by 2 steps. rotate() is then called twice, and so
the call to .animate() is executed twice for each div. I can't use a single
call to .animate() because then the divs would jump directly to their final
destination instead of passing through adjacent positions.

I've tried the following alternatives:

1) Using queue: false and using the second call with setTimeout so that it
is executed just before the first animation completes.

2) Using queue: true as in original code but calling .stop() a fraction of a
second before the first animation completes on its own so that it is
interrupted and the second animation in the queue starts immediately.

3) Putting the second call to .animate() in the callback function of the
first animate.

All of these alternatives produced exactly the same results as the original
code. The rotating menu makes a noticeable pause after the first animation
before proceeding with the second.

On Tue, Jan 13, 2009 at 8:20 PM, Nikola nik.cod...@gmail.com wrote:


 It's hard to tell without having a look at the code.  You may want to
 try http://paste.pocoo.org to post code like this.

 Are you chaining the animations? ie. $(this).animate({},speed).animate
 ({},speed).animate({},speed);

 You could always try setting a delay on your second animation with
 setTimeout.

 setTimeout ('$(this).animate({},speed)', 400);

 Hope that helps.
 Nikola

[jQuery] Re: .animate() queue without pause between animations

[Nikola]

What about doing something similar to what Karl Swedberg did in his
animated scrolling example?

http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12

[jQuery] Re: .animate() queue without pause between animations

[Karl Swedberg]

Is it possible to have a variable for the number of pixels by which  
the menu animates (and doubling it when necessary), rather than  
calling animate twice?


Also, .animate() is part of jQuery core, so you've posted to the  
correct group. ;-)


--Karl


Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jan 13, 2009, at 4:29 PM, Miloš Rašić wrote:


Here's the function I use to rotate the menu: http://paste.pocoo.org/show/99509/

The icons are located inside divs with ids 'pos_1' through 'pos_5',  
'pos_1' being the leftmost icon, and 'pos_5' being the rightmost  
icon. The all have class 'pos'.


The problematic case occurs when the user clicks on 'pos_1' or  
'pos_5' and the menu has to be rotated by 2 steps. rotate() is then  
called twice, and so the call to .animate() is executed twice for  
each div. I can't use a single call to .animate() because then the  
divs would jump directly to their final destination instead of  
passing through adjacent positions.


I've tried the following alternatives:

1) Using queue: false and using the second call with setTimeout so  
that it is executed just before the first animation completes.


2) Using queue: true as in original code but calling .stop() a  
fraction of a second before the first animation completes on its own  
so that it is interrupted and the second animation in the queue  
starts immediately.


3) Putting the second call to .animate() in the callback function of  
the first animate.


All of these alternatives produced exactly the same results as the  
original code. The rotating menu makes a noticeable pause after the  
first animation before proceeding with the second.


On Tue, Jan 13, 2009 at 8:20 PM, Nikola nik.cod...@gmail.com wrote:

It's hard to tell without having a look at the code.  You may want to
try http://paste.pocoo.org to post code like this.

Are you chaining the animations? ie. $(this).animate({},speed).animate
({},speed).animate({},speed);

You could always try setting a delay on your second animation with
setTimeout.

setTimeout ('$(this).animate({},speed)', 400);

Hope that helps.
Nikola

[jQuery] Re: .animate() queue without pause between animations

[Nikola]

Ahh, sorry about that UI always comes to mind when I think of visual
presentation, ie. fading, exploding, animating etc..