0

I have a number of divs(myDiv) on a page. When the user hovers over one of the divs I would like to: after a little delay, display another div(myPop) on top. Almost like a tooltip. The code below is just not quite doing it. If the user moves the mouse across a number of myDivs then you can wait and see all the myPops fadein. I really want to just completely hide all the myPops that the user previously caused to be fadeIn. Because you end up with sort of trailing effect of all these myPops being displayed.

   $(".myDiv").hover(function () {
    $(this).find(".myPop").fadeIn('slow');
}, function () {
    $(this).find(".myPop").fadeOut('fast');
}
});
tim
  • 1,371
  • 3
  • 19
  • 30

2 Answers2

2

Try:

$(".myDiv").hover(function () {
    $(".myPop").stop();
    $(this).find(".myPop").fadeIn('slow');
}, function () {
    $(this).find(".myPop").fadeOut('fast');
});
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
0

You have a syntax error, you have an extra } for the second function, this should work:

$(".myDiv").hover(function () {
    $(this).find(".myPop").fadeIn('slow');
}, function () {
    $(this).find(".myPop").fadeOut('fast');
});
Cokegod
  • 8,256
  • 10
  • 29
  • 47
  • 1
    As assume this is a typo has the OP already said his code works ok but not exactly how he wants it to. If he had this error in his code, it would not work at all. – Felix Kling Jul 10 '11 at 15:41