Someone at core jQuery group told me my problem with .animate() belongs here, so here it is. This is my original post:
I'm using .animate() for a rotating navigation menu of 5 items, where the currently selected item is in the center. When I click on an icon next to the central everything works ok, but when I click on an icon to the far left or far right, two calls to .animate() are needed per icon for all icons to move correctly. The problem is that there is about a second of pause between the two animations for the same icon when I set queue: true. The effect is the same if I put the other call to .animate() into callback function of the first. Is there any way to get a seamless animation using multiple calls to .animate()? I tried queue: false but, as expected, the second call to .animate() will interrupt the first and the icons will not move correctly. Here's some more clarification I provided after it was requested: 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. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
