jQuery的悬停淡入/淡出问题

问题描述

http://www.izrada-weba.com/orso 在链接"NENATKRIVENA TERASA ..."上的鼠标悬停时，子菜单和图像一起淡入.子菜单使用一些已下载的脚本淡入淡出，而上面的图像通过我的代码淡出:

http://www.izrada-weba.com/orsoOn 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?

谢谢，伊利(Ile)

Thanks,Ile

推荐答案

函数stop()将停止指定元素上当前正在运行的动画.
尝试修改鼠标悬停功能:

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

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

子菜单似乎没有完全消失(请参阅ile的注释)，这似乎是一个问题.在我看来，这似乎是一个jQuery错误，但我不确定.也许有人可以插话并解释发生这种情况的原因.为了解决这个问题，请尝试使用fadeTo();.似乎产生了预期的结果:

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);
    }
  );
});

这篇关于jQuery的悬停淡入/淡出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！