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

这就是fadeout立即发生的原因。

您可以重复使用以下代码： -

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()内部。但我不知道该怎么做。所以，我还有另外一个技巧，只有在mouseover完成时才启用fadeOut() -

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()完成之前悬停在任何菜单上，则不会发生任何事情。尝试一下。

Answer 2

修改：请参阅此jsFiddle代码

我会将所有菜单项一次绑定到一个类名，每个类名都附加一个ID，就像（我只是在这里猜测你的HTML结构）：

<ul id="menu">
    <li class="menu-item" id="account">Account</li>
    <li class="menu-item" id="myposts">My Posts</li>
</ul>

你的javascript可能如下所示。请记住，它是未经测试的，我不确定它会对性能产生什么影响。

bindMouseOver();
$('.menu-item').mouseout(function(){
    $('.menu-item').unbind('mouseover'); //disable all mouseovers while fadeOut is happening
    $("#menu_name").fadeOut('slow', function(){
        bindMouseOver(); //rebind the mouseover event after the fadeOut is completed
    });
});
var bindMouseOver = function(){
    $('.menu-item').mouseover(function(){
        $("#menu_name").html($(this).html()); //use the menu item's innerHTML text, or something else if you prefer
        $("#menu_name").fadeIn('slow');        
    });
};

Answer 3

我创建了一个可能很有趣的Fiddle。它与this帖子中的类似，区别在于菜单项的名称是即时创建的。

来自小提琴的代码：

$("#menu li").hover(
    function() {
        if (!$(this).data("name")) {
            $(this).data("name",
                $('<div class="name"></div>')
                    .text($(this).text())
                    .hide()
                    .appendTo("#nameWrapper"));
        }

        $(this).data("name")
            .stop(true, true)
            .fadeIn();
    }, 
    function() {
        $(this).data("name")
            .stop(true, true)
            .fadeOut();
    }
);

我们的想法是为每个菜单项设置一个名称元素，这样当旧名称淡出并且新名称同时淡入时，您可以获得漂亮的淡入淡出效果。

如果没有名称元素，第一个悬停函数的第一部分会创建一个名称元素。该元素使用data()函数与菜单项连接。

第一个悬停函数的第二部分在名称元素中淡入淡出。第二个功能淡出它。

这里的技巧是使用stop(true, true)来停止元素上的所有动画。

编辑：

你从像这样的html结构开始：

<ul id="menu">
    <li>First</li>
    <li>Second</li>
</ul>
<div id="nameWrapper"></div>

在菜单项的几个鼠标悬停之后，nameWrapper div就像这样填充：

<div id="nameWrapper">
    <div class="name">First</div>
    <div class="name">Second</div>
</div>

div.name元素是将鼠标悬停在菜单项上时实际显示的内容。当您将鼠标悬停在菜单项上时，会在下面的代码部分中创建div.name元素：

$(this).data("name",                    // associate the <div class="name"> element with the menu item that is currently hovered - $(this)
    $('<div class="name"></div>')       // create a div element
        .text($(this).text())           // set text inside div to text of the menu item
        .hide()                         // hide the div (it gets faded in later)
        .appendTo("#nameWrapper"));     // append the element to the element with id nameWrapper

Answer 4

这是一个JSFiddle，我将所有JS简化为一个悬停监听器：Example here

[编辑]更新为自动加载菜单标题容器...

代码示例：

CSS

#menu_name div{
    position:absolute;
    display:none;
}

.menu_link{
    cursor:pointer;
}

HTML

<div id="menu_name"></div>
<br/>
<div id="menu_account" class="menu_link">link 1</div>
<div id="menu_myposts" class="menu_link">link 2</div>

的JavaScript

(function() {
    //auto-load the menu title container...
    $(".menu_link").each(function(index, item) {
        $('#menu_name').append('<div id="' + item.id + '-title">' + item.innerHTML + '</div>');
    });

    $(".menu_link").hover(
        function() {
            $('#' + this.id + '-title').fadeIn('medium');
        }, function() {
            $('#' + this.id + '-title').fadeOut('medium');
    });
})();

JQuery褪色问题

4 个答案: