jquery - Jqueryホバーイベント+css.animate

Question

（i）アイコンにカーソルを合わせるとフェードインする簡単なツールチップを作成しました。アルバムカバーにカーソルを合わせるとアイコンが表示されます。現時点では、奇妙なバグがあります。これは、.more-info opacity cssanimatejQueryメソッドが原因だと思います。これを修正する方法や、動作するコードを変更する方法を考えていました。

バグ：（i）アイコンにカーソルを合わせてツールチップが表示されたままにするか、（i）アイコンにカーソルを合わせると、ツールチップがフェードアウトしますが、アルバムカバーにカーソルを合わせると、完全にフェードアウトします。若干。ツールチップは、（i）アイコンにカーソルを合わせるか、ツールチップ自体にカーソルを合わせたときにのみ表示されます。

バグのビデオ：http ：//www.screenr.com/tIJ8

問題のあるサイト：http：//www.midnightlisteners.com/

ツールチップのcssファイル： http： //www.midnightlisteners.com/wp-content/themes/midnightlisteners-v2.0wp/css/the-tooltip.css

HTMLコード：

<div class="more-info">
    <div class="the-tooltip top center black">
        <span class="too-tip-text">
        <h3>Similar than: <span><?php the_title(); ?> &rsaquo; </span></h3>
        <div class="related">
           <ul>
           </ul>
        </div>
        </span>
    </div>
</div>

</ p>

jQueryコード：

 $(".play").mouseenter(function() {
        $(this).next('.more-info').stop(true, false).animate({
            opacity: '1'
        }, 800, 'linear');
        $(".more-info").mouseenter(function() {
            $(this).stop(true).animate({
                opacity: '1'
            }, 800, 'linear');
        });
    });
    $(".play").mouseleave(function() {
        $(this).next('.more-info').stop(true, false).animate({
            opacity: '0'
        }, 1000, 'linear');
        $(".more-info").mouseleave(function() {
            $(this).stop(true).animate({
                opacity: '0'
            }, 1000, 'linear');
        });
    });


    $(".more-info").mouseenter(function() {
        clearTimeout($(this).data('timeoutId'));
        $(this).find(".the-tooltip").fadeIn('150', 'linear');
    }).mouseleave(function() {
        var someElement = $(this);
        var timeoutId = setTimeout(function() {
            someElement.find(".the-tooltip").fadeOut('150', 'linear');
        }, 1200);
        //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
        someElement.data('timeoutId', timeoutId);
    });

CSSコード：

.more-info{
    position: absolute;
    top: 75px;
    left: 85px;
    z-index: 9999;
    display: block;
    width: 19px;
    height: 18px;
    background: transparent url(images/midnightlisteners-bgs-matrix.png) no-repeat -60px -44px;
    cursor: pointer;
    opacity: 0;
    display: block;
}

.more-info:hover{

}​

編集：コードをより単純にし、それを自分で繰り返さないようにする方法。var要素を実装する方法

$(".play").mouseenter(function(){
        $(this).next('.more-info').stop(true, false).animate({
            opacity: '1'
            }, 800, 'linear');
        $(".more-info").mouseenter(function(){
            $(this).stop(true).animate({
                opacity: '1'
                }, 800, 'linear');
        });
        $(".the-tooltip-wrap").mouseenter(function(){
            $(this).prev(".more-info").stop(true).animate({
                opacity: '1'
                }, 800, 'linear');
        });
    });
    $(".play").mouseleave(function(){
        $(this).next('.more-info').stop(true, false).animate({
            opacity: '0'
            }, 1000, 'linear');
        $(".more-info").mouseleave(function(){
            $(this).stop(true).animate({
                opacity: '0'
                }, 1000, 'linear');
        });
        $(".the-tooltip-wrap").mouseleave(function(){
            $(this).prev(".more-info").stop(true).animate({
                opacity: '0'
                }, 1000, 'linear');
        }); 
    }); 

</ p>