jQuery的懸停淡出默認的div過渡口吃

Question

將鼠標懸停在導航按鈕上時，我嘗試使用with與交換div可見性。 沒有鼠標懸停時，將出現一個“默認” div。

我的問題是每次鼠標在鏈接之間轉換時，默認div都會短暫出現。

是否有可能使交換變得無縫，或者對交換采取不同的方法？ 我嘗試為默認div設置一個帶有淡入淡出/淡入淡出事件的nav容器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();      
        });

Answer 1

我只是擺脫了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。