Jquery悬停事件+css.animate

我创建了一个简单的工具提示，当您将鼠标悬停在I图标上时，该提示将淡出。当鼠标悬停在专辑封面上时，图标会出现。目前有一个奇怪的bug，我认为是由于。更多信息不透明度css动画jQuery方法。我想知道如何修复这个问题，或者如何更改代码，使其正常工作

错误：当鼠标悬停在i图标上，工具提示出现，然后离开它或i图标时，工具提示淡出，但如果在完全淡出之前将鼠标悬停在专辑封面上，它会闪烁一点。仅当鼠标悬停在i图标上或鼠标悬停在工具提示上时，工具提示才会出现

错误视频：

出现问题的站点：

工具提示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>

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');
        }); 
    }); 

---

​

如果您在此页面上发布示例可能会更容易。我并不总是测试我的代码，但当我测试代码时，我会确保在生产服务器上进行测试。我自己并没有真正注意到这个问题，但每次鼠标进入和离开任何.play元素时，您都会绑定一个新的事件处理程序。更多信息。这将成为一堆垃圾处理程序。试着将它们移出进入/离开处理程序，看看这是否有帮助。啊，现在我明白了。您应该将工具提示移出“播放/更多信息”容器。同时设置子对象和父对象不透明度的动画很可能是导致此问题的原因。您好，Marcus Ekwall，您能再解释一下吗？我对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');
        });
        $(".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');
        }); 
    });