Animate jerky on firefox

[jgagnet]

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.

[dmethvin]

Can you provide a test case in jsfiddle?

[trac-o-bot]

Automatically closed due to 14 days of inactivity.

[[email protected]…]

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

[[email protected]…]

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