Side navigation
#11982 closed bug (notabug)
Opened June 28, 2012 05:44AM UTC
Closed June 29, 2013 08:04PM UTC
JQuery animate() issue when another animate is called from within the step function.
| Reported by: | chadly.keller@gmail.com | Owned by: | gnarf |
|---|---|---|---|
| Priority: | low | Milestone: | None |
| Component: | effects | Version: | 1.7.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
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();
Attachments (0)
Change History (8)
Changed June 28, 2012 05:49AM UTC by comment:1
Changed June 28, 2012 05:53AM UTC by comment:2
Man not my lucky day..
Changed July 03, 2012 06:22PM UTC by comment:3
| owner: | → chadly.keller@gmail.com |
|---|---|
| status: | new → pending |
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...
Changed July 03, 2012 08:00PM UTC by comment:4
| status: | pending → new |
|---|
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.
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.
Changed July 03, 2012 08:07PM UTC by comment:5
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.
Changed August 21, 2012 02:39AM UTC by comment:6
| component: | unfiled → effects |
|---|---|
| owner: | chadly.keller@gmail.com → gnarf |
| priority: | undecided → low |
| status: | new → assigned |
gnarf, I'll let you make the call on this one.
Changed October 22, 2012 05:03PM UTC by comment:7
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"
Changed June 29, 2013 08:04PM UTC by comment:8
| resolution: | → notabug |
|---|---|
| status: | assigned → closed |
Since the OP hasn't replied I am assuming it's either fixed, not a bug, or not urgent.
sorry for posting the code.. here is the example.
http://jsfiddle.net/WMqCg/