jquery-animate

First take a look: The cat needs to move to the x in a curve . (see the arrow) When the cat hits the x, it should stay 10 seconds, and after that the cat should go back to o, again in a curve, and repeat. I tried it with this code: function curve() { $('#cat').delay(10000).animate({top: '-=20',left: '-=20'}, 500, function() { $('#cat').delay(10000).animate({top: '+=20', left: '+=20'}, 500, function() { curve(); }); }); } curve(); But the cat is moving like this: Is there a way to get the cat to move in this kind of curve? You can use easing to achieve that, by doing a compound movement :

Is it possible to change the duration of a currently running jQuery animation between two different values? I've tried to change the duration via direct assignment, but no success: var timing = { duration: 4000 }; $(document).click(function (e) { timing.duration = 1000; }); $('#foo').animate({top:200, left:200}, timing); ...and even, changing the fx.options.duration in step -method does not affect the running animation: var state = false, $(document).click(function (e) { state = true; }); $('#foo').animate({top:200, left:200}, { duration: 4000, step: function(now, fx){ if(state) fx.options

JavaScript is a single threaded language and therefore it executes one command at a time. Asynchronous programming is being implemented via Web APIs ( DOM for event handling, XMLHttpRequest for AJAX calls, WindowTimers for setTimeout ) and the Event queue which are managed by the browser. So far, so good! Consider now, the following very simple code: $('#mybox').hide(17000); console.log('Previous command has not yet terminated!'); ... Could someone please explain to me the underlying mechanism of the above? Since .hide() has not yet finished (the animation lasts 17 seconds) and JS engine is

I have a timeline with little pins on it which when hovered over, slide up or down and then display a caption. When the mouse leaves, the caption should disappear and the pin moves back. This works, but with the code I am using, if the mouse moves too quickly, it doesn't detect the mouse leave. How can I fix this? P.S, the only reason I am using mouse enter/leave is because I think I needed to use live() as my elements are added dynamically after the document loads. $('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function(){ $(this).animate({ top:25 }, 200, function

My goal: Move/animate an image along a path like the drawing below (Could be connecting bezier curves). Must work in IE7+, don't what to build multiple solutions. I can pause/resume the moving image. The image will keep moving along the path (repeat). What I have considered CANVAS: not supported in IE7+8, haven't tested explorercanvas yet! Foresee some z-index issues. SVG, not supported in IE7+8. jQuery.path, a plugin that extends the jQuery animate function. Can't figure out the resume part and I want to use CSS transforms when supported. My plan Animate the image with CSS 3D transform, CSS