javascript - JQuery 褪色问题

Question

我有一个包含 8 张图片的菜单，我想为它们编写淡入淡出效果。我想在鼠标经过时显示菜单的名称，并在鼠标移出时隐藏它。这是我的两个菜单项的代码:

$(".menu_account").mouseover(function(){
    $("#menu_name").html('first');
    $("#menu_name").fadeIn('slow', function(){
     $(".menu_account").mouseout(function(){
      $("#menu_name").fadeOut('slow', function(){});
     })
    });
});

$(".menu_myposts").mouseover(function(){
    $("#menu_name").html('second');
    $("#menu_name").fadeIn('slow', function(){
     $(".menu_myposts").mouseout(function(){
      $("#menu_name").fadeOut('slow', function(){});
     })
    });
});

我的问题是当我在第一个项目上并且名称已经出现时，当我在第一个项目淡出之前将光标移动到第二个项目时，名称的 innerHTML 发生变化并且变得难看。我想等淡出完成再重新开始。我真的很感激任何帮助。 谢谢。

这是我的完整代码: HTML :

<div id="menu">
                <a class="menu_account"></a>
                <a class="menu_myposts"></a>
                <a class="menu_allposts"></a>
                <a class="menu_favorites"></a>
                <a class="menu_follow"></a>
                <a class="menu_logout"></a>
                <a class="menu_help"></a>
                <a class="menu_contact"></a>
            </div>

<div style="height:20px;width:200px;margin:0 auto;text-align:center;">
                    <div id="menu_name" style="font-size:30px;color:#A1A1A1;display:none;"></div>
                </div>

JS:

$("#menu").ready(function(){

$(".menu_myposts").hover(
    function () {
         $("#menu_name").html('first');
         $("#menu_name").fadeIn('slow', function(){});
    },
    function () {
        $("#menu_name").fadeOut('slow', function(){});
    }
);

$(".menu_myposts").hover(
    function () {
        $("#menu_name").html('second');
        $("#menu_name").fadeIn('slow', function(){});
    },
    function () {
        $("#menu_name").fadeOut('slow', function(){});
    }
);
});

正确的JS:

$(".menu_item").hover(
        function() {        
            $("#menu_name").html($('#' + this.id + '_name').html());
            $("#menu_name").stop(true, true).fadeIn();
        }, 
        function() {
            $("#menu_name").stop(true, true).fadeOut();
        }
    );

Answer 1

我想 mouseout 事件应该像这样在外部定义:-

$(".menu_account").mouseover(function(){
    $("#menu_name").html('first');
    $("#menu_name").fadeIn('slow', function(){
    });
});

 $(".menu_account").mouseout(function(){
  $("#menu_name").fadeOut('slow', function(){});
 })

这就是淡出会立即发生的原因。

您可以像这样重用代码:-

var menuClasses = {'menu_account' : 'first', 'menu_classes' :'second'};

$.each(menuClasses function(index, value) { 
   $("."+value).hover(dothisOnMouseover(value), dothisOnMouseout())
});

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

function dothisOnMouseover(value)
{
        $("#menu_name").html(value);
        $("#menu_name").fadeIn('slow', function(){});
}

function dothisOnMouseout()
{
        $("#menu_name").html('');
        $("#menu_name").fadeOut('slow', function(){});
}

更新
解决方案是以某种方式检查 dothisOnMouseout() 是否 fadeIn() 已经完成。但我不知道该怎么做。所以，只有当 fadeOut() 完成时，我才有其他技巧来启用 mouseover -

function dothisOnMouseover(value)
{
        //Remove the `onmouseover="dothisOnMouseover()" binding of all other menus here - or may be all menus - check it.
        $("#menu_name").html(value);
        $("#menu_name").fadeIn('slow', function(){
           //On completion of this fade in attach back the `onmouseover="dothisOnMouseover"` event binding all other menus here - Note - do not call `dothisOnMouseout()` here
        });
}

这样做，如果您在 fadeOut() 完成之前将鼠标悬停在任何菜单上，则不会发生任何事情。试试吧。