Jquery hover fadeIn/fadeOut problem

Question

http://www.izrada-weba.com/orso On mouseover on link "NENATKRIVENA TERASA..." submenu and image fade in together. Submenu is faded using some downloaded script and image above is fading using my code:

$(document).ready(function () {
   $("#slika1").hide();

  $("#test,#submenu2").hover(
      function () {
       $("#slika1").fadeIn();
      }, 
      function () {
         $("#slika1").fadeOut();
      }
    );       
});

When mouse is over link than image fades in, and when mouse is moved to submenu image fades out and than fades in again... I know why is that so but I don't know how to make it not fadeout when moving mouse directly from link to submenu. Are there any solutions for this?

Thanks, Ile

Solution 1

The function stop() will stop any currently running animations on the specified element.
Try modifying your mouseover function:

$("#slika1").stop().fadeIn();

Edit:
There seems to be a problem with the submenu not fading in all the way (see ile's comment). This seems to me like its a jQuery bug, but I'm not sure. Maybe someone can chime in and explain why this is happening.
To get around this try using fadeTo(); it seems to produce the desired result:

$(document).ready(function () {
  $("#slika1").fadeTo(0,0);

  $("#test,#submenu2").hover(
    function () {
      $("#slika1").stop(true).fadeTo("normal",1);
    }, 
    function () {
      $("#slika1").fadeTo("normal",0);
    }
  );       
});

Solution 2

The problem with fadeIn() not working when the fadeOut() is interrupted is because fadeIn() only works if the element is hidden. Whether you call it a bug or a feature. To remedy this you can do the following.

$("#mydiv").stop().hide().fadeIn(450);