jQuery的悬停淡出默认的div过渡口吃

Question

I am attempting to use hover with with to swap div visibility when mousing over navigation buttons. When there is no mouseover, there is a 'default' div that should appear.

My problem is that every time the mouse transitions between links, the default div briefly reappears.

Is it possible to make the swap seamless, or will a different approach to the swap work? I attempted to set the nav container div with a fadeout/fadein event for the default div, but I didn't have any luck with that.

Refer to the following fiddle for an example: 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

I just got rid of true,true and it worked fine:

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

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

Updated your jsFiddle as well.

EDIT : took the time to clean up your jQuery as well:

$('#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');

This is much faster, as it binds to one item, and delegates appropriately. I also removed the element selector, as a pure class based / id based selector is faster. Updated your jsFiddle a second time.