0

当鼠标悬停在导航按钮上时，我正在尝试使用悬停与交换 div 可见性。当没有鼠标悬停时，应该出现一个“默认”div。

我的问题是每次鼠标在链接之间转换时，默认的 div 都会短暂地重新出现。

是否有可能使交换无缝，或者不同的交换方法是否有效？我尝试为默认 div 设置带有淡出/淡入淡出事件的导航容器 div，但我没有任何运气。

有关示例，请参阅以下小提琴：http: //jsfiddle.net/ElectricCharlie/Wk8Yd/

$('div.hmnav').hover(function()
        {
        $('#_wnr00').stop(true,true).fadeOut();
        $('#_'+this.id).stop(true,true).fadeIn(400);
        },
        function ()
            {
        $('#_'+this.id).stop(true,true).fadeOut(400);
        $('#_wnr00').stop(true,true).fadeIn();      
        });
4

1 回答 1

0

我刚刚摆脱了true,true它，它工作正常：

$('div.hmnav').hover(function () {
    $('#_wnr00').stop().fadeOut();
    $('#_' + this.id).stop().fadeIn(400);
},

function () {
    $('#_' + this.id).stop().fadeOut(400);
    $('#_wnr00').stop().fadeIn();
});

也更新了你的 jsFiddle。

编辑：也花时间清理你的 jQuery：

$('#navbox_inner')
    .corner("round 12px")
    .parent()
    .css({padding:1})
    .corner("round 14px")

$('#navbox_inner').on({
    mouseenter: function () {
        $('#_wnr00').stop().fadeOut();
        $('#_' + this.id).stop().fadeIn(400);
    },
    mouseleave: function(){
        $('#_' + this.id).stop().fadeOut(400);
        $('#_wnr00').stop().fadeIn();
    }
},'.hmnav');

这要快得多，因为它绑定到一个项目，并适当地委托。我还删除了元素选择器，因为纯基于类/基于 id 的选择器更快。第二次更新了你的 jsFiddle。

于 2013-04-02T16:24:00.547 回答