JQuery animate() issue when another animate is called from within the step function.

[chadly.keller@…]

I am having this weird behavior when trying to stop an animation, set the tweened property to another value inside a step function, and then start the animation again.

If you run the code below, when the condition is met in the step function, it should only show the logs once. What actually happens is even though I stop the animation and start it again (by calling autoScroll() in the step function), it's almost like the animate() leaves off where it was stopped even though I changed the value of the tweened property to something else before starting the animate() sequence again.

var obj = {left:0};

function autoScroll(){
		
	$(obj).animate({left:'-=100'},{
	duration:1000,
	easing:'linear',
	complete:autoScroll,
	step:function(){
		if(this.left < -80){
			$(this).stop(true);
			this.left += 80;
			console.log(this.left);
			console.log('stop');
			autoScroll();
		}
	}
});

autoScroll();

[chadly.keller@…]

sorry for posting the code.. here is the example.

 http://jsfiddle.net/WMqCg/

[chadly.keller@…]

Man not my lucky day..  http://jsfiddle.net/WMqCg/3/

[gnarf]

I'm really not sure what the bug is supposed to be here...  http://jsfiddle.net/WMqCg/5/ When it starts it is at the value you set it to...

[chadly.keller@…]

It is hard to catch, but a couple things to point out.

• the step function is being called 'before' the actual property is updated.
• when the animation is stopped and restarted, it updates the property based on a cached stored value from the previous animation. (on the second step) since the first step of an animation is a distance of 0 from the starting point.

I hope I am making sense.

here is an updated fiddle and a sample of the output with comments to point out the issue.

 http://jsfiddle.net/WMqCg/19/

step value: -77.8 actual value: -76.5 step value: -79.10000000000001 actual value: -77.8 step value: -80.4 actual value: -79.10000000000001 step value: -81.69999999999999 <~ last value set before condition. actual value: -80.4 stopped += 80 -0.4000000000000057 step value: -0.4000000000000057 < first step call of new animate().. (before property is updated) actual value: -0.4000000000000057 step value: -1.8000000000000058 < second step call.. (after the first update) actual value: -81.69999999999999 < why would it jump back up to this value? it should be 0.4000000000000057. stopped += 80 -1.6999999999999886 < called a second time since the property was animated from the last stored value causing the condition to be true.

[xxneon]

to make it easier to read..

step value: -77.8
actual value: -76.5
step value: -79.10000000000001
actual value: -77.8 
step value: -80.4 
actual value: -79.10000000000001 
step value: -81.69999999999999 <~ last value set before condition. 
actual value: -80.4 
stopped += 80 -0.4000000000000057 
step value: -0.4000000000000057 <~ first step call of new animate().. (before property is updated) 
actual value: -0.4000000000000057 
step value: -1.8000000000000058 <~ second step call.. (after the first update) 
actual value: -81.69999999999999 <~ why would it jump back up to this value? it should be 0.4000000000000057. 
stopped += 80 -1.6999999999999886 <~ called a second time since the property was animated from the last stored value causing the condition to be true.

[dmethvin]

gnarf, I'll let you make the call on this one.

[gnarf]

Out of curiosity, could you try doing the same thing with the 1.8 progress callback and let me know if it has similar problems? There is a bit of strangeness manipulating the actual animation in the step callback that just has me thinking "unexpected behaviors galore"