[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 692
  • Last Modified:

Applying fadeIn / fadeOut jQuery effect to photo positioned absolute not animating smoothly in Firefox

This is my test page:
http://www.berksfoods.com/family-fun2.htm

The issue I am seeing appears to only happen in Firefox. When you mouseover the square Quiz graphic, that image fades out. As this happens, the image appears to jump one pixel to the left. When you mouseout, the same thing seems to happen as the image fades back in. After the animation is complete, the image returns to the correct position (where it started out).

I think this problem is related to the width of the browser window. Sometimes, you don't see the problem at all. If you resize your window and try it again, you may see the problem. It might even have something to do with whether your browser window is an odd or even number of pixels in width, but I'm not 100% sure of that. But resizing the browser window seems to give you a 50/50 chance of seeing the problem.

The script is relatively simple:

$('div.news').hover(function(){
	$(this).children('img.photo').fadeOut(200);
	if (!$(this).children('img.photo').length){
		$(this).children('img.overlay').fadeOut(200);
	}
}, function(){
	$(this).children('img.photo').fadeIn(200);
	$(this).children('img.overlay').fadeIn(200);
});

Open in new window


Any advice?

Thank you!
0
bbdesign
Asked:
bbdesign
  • 3
  • 2
  • 2
  • +1
3 Solutions
 
GaryCommented:
Not seeing it.
Are you talking about the whole box shifting or just the image within the constraints of the container is shifting?
0
 
bbdesignAuthor Commented:
I think its just the image. I slowed down the animation in order to capture what is happening in a screenshot. The first image attached is "before mouseover", the 2nd is "during transition", and I can see there is a 1px difference between the dotted line to the left and the image.
static.jpg
animation.jpg
0
 
Dave BaldwinFixer of ProblemsCommented:
I'm not seeing it.  I suggest that you speed up the transition and then you will be the only one who knows.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GaryCommented:
See what you mean, but still not seeing it in any browser.
0
 
Scott Fell, EE MVEDeveloperCommented:
I don't see it either chrome/firefox on mac.

However, using the validator http://validator.w3.org/check?uri=http%3A%2F%2Fwww.berksfoods.com%2Ffamily-fun2.htm&charset=%28detect+automatically%29&doctype=Inline&group=0 it looks like you have a stray tag.  Try fixing that up and see what happens.
0
 
bbdesignAuthor Commented:
I found a misplaced tag and corrected it, that didn't seem to effect the issue though.
0
 
Scott Fell, EE MVEDeveloperCommented:
Just tried it on firefox27, then upgraded to firefox28 on windows7 and no issue.
0
 
bbdesignAuthor Commented:
Thanks for looking, guys.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now