Jquery fade in/out on hover problem - Stop the blinking!

I'm using this script to fade in icons over another when hovered over.

I also want to hide the previous image once the top image is finished fading in.

The problem I am running into is that when you hover over it seems to blink before it fades. I need the blinking to stop!

Below is my HTML and jQuery code. I tried to make this code somewhat universal.

.link-container {
    position: relative;
    cursor: pointer;
    float: left;
}
.title-hover {
    background-position: 0 -106px;
    width: 320px;
    height: 33px;
    mar开发者_JAVA技巧gin: -32px 0 0 56px;
    display: none;
    z-index: 2;

}
.title {
    background-position: 0 -63px;
    width: 320px;
    height: 33px;
    margin: -32px 0 0 56px;
}

<div class="link-container">
     <div class="main-tile hover-init title"></div>
     <div class="main-tile title-hover"></div>
</div>

$(function () {
     $(".link-container").hover(function () {
        $(".hover-init", this).next().stop(true, true).fadeIn(400);
        $(".hover-init", this).hide();
    }, function () {
        $(".hover-init", this).next().stop(true, true).fadeOut(400);
        $(".hover-init", this).show();
    });
});

---

You want to start the fadeOut AFTER the fadeIn finishes, right ? Then make it a callback of the fadeIn function :

$(".hover-init", this).next().stop(true, true).fadeIn(400, function() {
  $(".hover-init", this).fadeOut();
});

EDIT :

now that I see the effect you want to achieve I don't even know why you want to fadeOut the first div.

http://jsfiddle.net/ARyjq/3/ do that

---

The problem is that hover switches from one div to another as the title pops up.
So, you need to sniff what kind of div you are in and vary the response.

Code that does as you ask looks like this:

$(".link-container div.main-tile").hover (fancyRollover);

function fancyRollover (zEvent) {
    var jThis           = $(this);
    var bInInitDiv      = jThis.hasClass ('hover-init');
    if (bInInitDiv) {
        var initDiv     = jThis;
        var hoverDiv    = jThis.next ();
    }
    else {
        var initDiv     = jThis.prev ();
        var hoverDiv    = jThis;
    }

    if (zEvent.type == 'mouseenter') {
        if (bInInitDiv) {
            hoverDiv.stop (true, true).fadeIn (400, function () {
                initDiv.hide ();
            } );
        }
        else {
            //--- Do nothing.
        }
    }
    else { //-- zEvent.type == 'mouseleave'
        if (bInInitDiv) {
            //--- Do nothing.
        }
        else {
            hoverDiv.stop (true, true).fadeOut (400);
            initDiv.show ();   
        }
    }
}

See it in action at jsFiddle.