Jqueryがホバーのフェードイン/アウトの問題 - 点滅を止めてください！

Question

私は、このスクリプトを使用して、ホバーオーバーしたときにアイコンをフェードインします。

私も、トップの画像がフェードイン終了すると前の画像を非表示にする。

私はに実行しています問題は、あなたがそれの上に置くと、それはフェードの前に点滅しているようだということです。私は停止するために点滅が必要です！

以下は私のHTMLとjQueryのコードです。私はこのコードをやや普遍的なものにしようとしました。

.link-container { 
    position: relative; 
    cursor: pointer; 
    float: left; 
} 
.title-hover { 
    background-position: 0 -106px; 
    width: 320px; 
    height: 33px; 
    margin: -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(); 
    }); 
}); 

Answer 1

問題が1つのDIVから別のものホバースイッチであることを行います。
だから、どんな種類のdivを嗅ぎ、反応を変える必要があります。あなたが尋ねるとし

コードは次のようになります。

$(".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.

Answer 2

fadeInを終了した後にfadeInを終了したいのですか？今私はあなたが最初のdivをフェードアウトしたい、なぜ私も知らない達成したい効果を見ること

：

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

EDIT：その後フェードイン機能のコールバックします。

http://jsfiddle.net/ARyjq/3/タイトルがポップアップするよう