jquery - 菜单项鼠标悬停时淡入有效，但淡出无效

Question

请帮忙；我正在开发一个网站，我想要一个图像在 mouseenter 和 mouseleave 上淡入和淡出。

http://postimg.org/image/s82v127cp/

请看一下上面的图片。这是mouseenter时的状态，自带fadeIn效果。所以fadeIn 效果很酷，但是fadeout 没有效果!我正在使用以下代码来实现此目的:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

    
    $(document).ready(function(){
        $("#menu-item-67").mouseenter(function(){
            $("#text-11").hide().fadeIn(1000);
        });

      $("#menu-item-67").mouseleave(function(){
        $("#text-11").fadeOut(1000);
      });
    });
    

Answer 1

您可以简单地执行以下操作:

$(document).ready(function(){
 $('#menu-item-67').mouseover(function(){
  $("#text-11").fadeToggle(1000);
 });

 $('#menu-item-67').mouseleave(function(){
  $("#text-11").fadeToggle(1000);
 });
});