CODEWITHSUNDEEP
jqueryhtmlcss
Haikukitty
Haikukitty

Reputation: 162

JQuery Div FadeIn/FadeOut Works Intermittently and Inconsistently

I feel like I should have found been able to find this answer, and I've found some that are close. (i.e. jquery fadeIn does not reach full opacity on doubleclick? )

However, my problem is quirky and a little different, and my JQuery already has the '.stop' added. My FadeIns' opacities are inconsistent, despite the fact that each fadeIn div is coded the exact same way. Additionally, the inconsistencies are inconsistent! It's not always the same FadeIn that won't achieve full opacity, and sometimes the hidden div won't fade in at all, other times it does.

OK, so I have a page with a bunch of pics, each of which, when hovered over, theoretically fades in a text div below, which will then fade out either when you go on to the next pic, or when you mouseout out of the TEXT div, not the pic div (thanks to this answer: jQuery onmouseover + onmouseout / hover on two different divs).

See here for working(NOT working!) example: http://www.umbc.edu/facultydiversity/index5.html

Here's my JQuery:

$(function() {
$('#youngtxt').hide();

$('#young, #youngtxt').hover(function() {
$('#youngtxt').stop().FadeIn();
}, function(){
$('#youngtxt').stop().FadeOut();

 });
});

I have "solved" the problem for now by changing to show/hide instead of fadein/fadeout, but I'd like to know why the FadeIn wouldn't work.

Please let me know if I need to provide more info to this question!

Thanks!

Upvotes: 0

Views: 1026

Answers (3)

Brian Hough
Brian Hough

Reputation: 573

I would check out: http://www.2meter3.de/code/hoverFlow/

Great plugin for dealing with the animation queue and hover effects.

Upvotes: 0

shaunsantacruz
shaunsantacruz

Reputation: 8930

When you call stop() mid-animation on fadeIn() and fadeOut() there will be a fraction of the opacity still visible.

.stop(true,true) will work but it will make it 'jump to end' causing jerky animation.

If smooth animation is important, consider using animate() instead of fadeIn() fadeOut()

Upvotes: 1

adeneo
adeneo

Reputation: 318182

Set the options for stop() to true, and fadeIn/Out does not start with capital F.

$('#youngtxt').hide();

$('#young, #youngtxt').hover(function() {
    $('#youngtxt').stop(true, true).fadeIn();
}, function(){
    $('#youngtxt').stop(true, true).fadeOut();
});

FIDDLE

Upvotes: 3

Related Questions