0 Replies - 3291 Views - Last Post: 20 December 2012 - 02:02 AM

#1 xor-logic  Icon User is offline

  • HAL9000 was an Apple product
  • member icon

Reputation: 128
  • View blog
  • Posts: 764
  • Joined: 04-February 10

Problems with animate in Google Chrome

Posted 20 December 2012 - 02:02 AM

I am a JQuery noob, first of all. Now, to the question: I've been working on this site here for a bit, though it's not finished (obviously). The navigation is handled by the five tiles in the upper right which, when you mouseover them, should slide down into visibility, then on mouseout return to their original positions. And so far it works.

But last night I noticed that in Google Chrome, at window zoom values other than 100%, the tiles do not return to their original positions. If the zoom is < 100, the tiles travel too far back up and get hidden under the bar. If the zoom is > 100, the opposite happens. They start to crawl down the page.

I thought maybe the mouseout event was somehow triggering before the mouseover animation finished, so I tried adding in a boolean switch. It didn't change anything.

I've tried to duplicate this problem in Firefox and Internet Explorer, but didn't succeed.

So here again is the link to the page.
And here is the JQuery I wrote to animate the menus:
$(document).ready(function() {
	var $extended = false;
	$('.nav_square_pad').mouseenter(function() {
		if($extended === false) {
		$(this).animate({"top":"+=55px"},300);
		$extended = true;
	}
	});
	$('.nav_square_pad').mouseleave(function() {
		if($extended === true) {
		$(this).animate({"top":"-=55px"},300);
		$extended = false;
	}
	});
	
});


Is This A Good Question/Topic? 0
  • +

Page 1 of 1