Bug Tracker

Opened 14 years ago

Closed 12 years ago

Last modified 11 years ago

#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 dmethvin

Owner: set to jgagnet
Status: newpending

Can you provide a test case in jsfiddle?

comment:2 Changed 12 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Automatically closed due to 14 days of inactivity.

comment:3 Changed 12 years ago by [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'});			
		});	
	});

comment:4 Changed 12 years ago by [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

Note: See TracTickets for help on using tickets.