#3767 closed bug (invalid)
Animate jerky on firefox
Reported by: | jgagnet | Owned by: | jgagnet |
---|---|---|---|
Priority: | major | Milestone: | 1.3 |
Component: | effects | Version: | 1.2.6 |
Keywords: | animate | Cc: | [email protected]… |
Blocked by: | Blocking: |
Description
When animating a property specified in em we can see some 'jerkyness'. The animated object will move quickly to the end of the animation and then resume its normal animation. The animation would then not always start from the correct position.
This is due to the way jQuery calculate the start position for a non 'px' units. In the source this is
if ( unit != "px" ) { self.style[ name ] = (end || 1) + unit; start = ((end || 1) / e.cur(true)) * start; self.style[ name ] = start + unit; }
The second line would move the element to its end position briefly but could be noticeable.
I understand that jQuery need to calculate the start position or we could actually give it to him like:
$("#carousel").animate({height: "3->12em"})
This would animate the height from 3 to 12.
Change History (4)
comment:1 Changed 12 years ago by
Owner: | set to jgagnet |
---|---|
Status: | new → pending |
comment:2 Changed 12 years ago by
Resolution: | → invalid |
---|---|
Status: | pending → closed |
Automatically closed due to 14 days of inactivity.
comment:3 Changed 12 years ago by
not sure if this is a relevant place to post this, but i think i found a bug with animate() in Firefox where the element jumps to the end of its animation when using 'toggle' as the method rather than a position value .. also, i thought the bug was related to the fact that i have a nested function inside the particular function that gives me the problem (in order to reverse the animation on second click), but removing the nested function did not resolve the problem ..
this works:
// toggle animate from left 2 elements in succesion, then reverse on de-toggle // http://stackoverflow.com/questions/2132090/jquery-reversing-animation-on-second-click $('#site-title').toggle(function() { $('.contact-link-box').animate({left: '180px'}, 690, function() { $(".contact-link").animate({left: '180px'}, 900); }); }, // now to de-toggle function(){ $(".contact-link").animate({left: '1px'}, 900, function() { $('.contact-link-box').animate({left: '1px'}, 690); }); });
this does NOT work:
// toggle animate from left 2 elements in succesion, then reverse on de-toggle // http://stackoverflow.com/questions/2132090/jquery-reversing-animation-on-second-click /* $('#site-title').toggle(function() { $('.contact-link-box').animate({left: 'toggle'}, 500, function() { $(".contact-link").animate({left: 'toggle'}), 1200; }); }, // now to de-toggle function(){ $(".contact-link").animate({left: 'toggle'}, function() { $('.contact-link-box').animate({left: 'toggle'}); }); });
comment:4 Changed 12 years ago by
btw i know my speeds arent in their correct spots in the "does not work" code example above, but the code i meant o paste there was correct as it is above only with the 'toggle' setting in place instead of position values
Can you provide a test case in jsfiddle?