jquery fadein fadeout problem in firefox

I want to initially hide .noteHover and then use a hover event that will fade this class in and then out very quickly. This seems to work fine in chrome but my problem is that in ff .noteHover remains as display:none which prevent the fadein fadeout effect, can anyone offer some advice to where im going wrong?

Here is my code:

/* Hover test */
        /* Hover test */        
        var $notes = $('.note');

        $notes.each(function() {
         var thisNote = $(this);
         var nestedNoteHover = thisNote.find('.noteHover');
         var nestedPath = thisNote.find('path');

         nestedNoteHover.hide();

         thisNote.hover(
          function() {
            nestedPath.css('opacity', 0.8);
            nestedNoteHover.fadeIn(100, function() {
            nestedNoteHover.fadeOut(300);
           });
          },
          function() {
           nestedPath.css('opacity', 1);
          }
         );
        });

I have updated the code but still no change on ff?开发者_高级运维

Thanks!

---

I may be wrong here, but after looking on jQuery`s find method , I think that instead of

$(this).find($noteHover).fadeIn(100).fadeOut(300);

it should be:

$noteHover.fadeIn(100).fadeOut(300); // the variable you declared above...

---

If I understand your requirements correctly, this will do what you want:

var noteHover = $('.noteHover').hide();
$('.note').hover(function() { /* on mouse enter */
    noteHover.fadeIn(400).fadeOut(100);
}, function() { /* on mouse out */
    noteHover.hide();   
});

Demo here.