Animate jerky on firefox

Reported by:	jgagnet	Owned by:	jgagnet
Priority:	major	Milestone:	1.3
Component:	effects	Version:	1.2.6
Keywords:	animate	Cc:	julien.gagnet@gmail.com
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.

Attachments (0)

Change History (4)

Changed November 13, 2010 08:00PM UTC by dmethvin comment:1

owner:	→ jgagnet
status:	new → pending

Can you provide a test case in jsfiddle?

Changed December 02, 2010 08:07AM UTC by trac-o-bot comment:2

resolution:	→ invalid
status:	pending → closed

Automatically closed due to 14 days of inactivity.

Changed February 26, 2011 07:48AM UTC by jonmills12@gmail.com comment:3

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'});			
		});	
	});

Changed February 26, 2011 07:55AM UTC by jonmills12@gmail.com comment:4

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

Side navigation