Solved

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

Posted on 2014-03-19
8
643 Views
Last Modified: 2014-04-01
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
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 167 total points
ID: 39940807
Not seeing it.
Are you talking about the whole box shifting or just the image within the constraints of the container is shifting?
0
 

Author Comment

by:bbdesign
ID: 39940833
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
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 167 total points
ID: 39940888
I'm not seeing it.  I suggest that you speed up the transition and then you will be the only one who knows.
0
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
LVL 58

Expert Comment

by:Gary
ID: 39940918
See what you mean, but still not seeing it in any browser.
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 166 total points
ID: 39941513
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
 

Author Comment

by:bbdesign
ID: 39942401
I found a misplaced tag and corrected it, that didn't seem to effect the issue though.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39942726
Just tried it on firefox27, then upgraded to firefox28 on windows7 and no issue.
0
 

Author Comment

by:bbdesign
ID: 39942902
Thanks for looking, guys.
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Ahax pagination 9 48
JQuery Syntax... 4 50
Using Modal's in to Retrieve Data from MySql and Populate Forms 13 82
How do I update select listbox after search 2 25
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question