Bug Tracker

Opened 10 years ago

Closed 8 years ago

Last modified 7 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: julien.gagnet@…
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 9 years ago by dmethvin

Owner: set to jgagnet
Status: newpending

Can you provide a test case in jsfiddle?

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

Resolution: invalid
Status: pendingclosed

Automatically closed due to 14 days of inactivity.

comment:3 Changed 8 years ago by jonmills12@…

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 8 years ago by jonmills12@…

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.