0

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!

Community
  • 1
  • 1
Haikukitty
  • 162
  • 2
  • 15

3 Answers3

3

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

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • actually you mean make sure `clearQueue` and, `jumpToEnd` parameters are set to true in the stop, ah progressive enhancement :P +1 – Loktar Mar 14 '12 at 19:04
  • +1. By default, those values are set to `false`. It would make perfect sense to default them to `true` considering many folks use `stop()` for queueing animations. – Nick Beranek Mar 14 '12 at 19:07
  • thanks. the capital "F" is a typing error, but was not present in my original version of this page, which I overwrote so had to go back to recreate. So, that at least was not causing the original behavior. 'true,true' does fix inconsistency but causes jumpy flickering when moving from pic div to text div instead. :-( – Haikukitty Mar 14 '12 at 19:55
1

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()

shaunsantacruz
  • 8,903
  • 3
  • 19
  • 19
  • Yep, just tried the 'true, true' and it does make it jump in and out. I'll try animate. I'm actually pretty happy with the working show/hide version, it's a stupid webpage anyway, but I'd like to be able to make this work for future reference. Thanks! – Haikukitty Mar 14 '12 at 19:50
0

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

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

Brian Hough
  • 563
  • 2
  • 8