JQuery Fadin/out mouseover problem

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

JQuery Fadin/out mouseover problem

Noc7urnal
Hi im using this piece of code to fade in a icon over another on a mouseover.  The problem im running into is that every time i hover over, the image blinks then fades.  I need the top image to be hidden when the bottom image is fading in and the blink to stop!  if you have any suggestions please help. My code is below.

.link-container {
        position: relative;
        cursor: pointer;
        float: left;
}

.title-hover {
        background-position: 0 -106px;
        width: 320px;
        height: 33px;
        position: absolute;
        margin: -32px 0 0 50px;
        display: none;
        z-index: 2;

}

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




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