在div上盘旋时重复的动画

Question

我已经阅读了有关此问题的其他问题和答案，但它们对我不起作用，也许我错过了一些或者我的例子略有不同，我不知道。无论如何，我有一个带有一些文本和内部链接的div，当用户将鼠标悬停在第一个div上时，我想创建一个新的div。问题是，当我超过第一个div时，第二个div会连续淡入淡出，即使我没有用鼠标留下第一个div。

以下是HTML代码：

<div id="content">
    <h1>Portfolio</h1>
        <div id="web">
            <p>Web apps</p>
            <a href="#">
                First link
            </a>
        </div>
        <div id="commentweb">
            <p>The text that I want to show</p>
        </div>
</div>

这是jQuery：

$(document).ready(function() {

$("#web").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

$("#commentweb").hide();

$("#web").hover(
  function () {
    $(this).children("a").children("img").attr("src","2.png");
    $(this).css("background-color","#ecf5fb");
    $(this).css( 'cursor', 'pointer' );
    $(this).css('border','1px solid #378ac4');
    $(this).children("p").css("opacity","1.0");
    $('#commentweb').stop(true, true).fadeIn();
  }, 
  function () {
    $(this).children("a").children("img").attr("src","1.png");
    $(this).children("p").css("opacity","0.5");
    $(this).css("background-color","#e8e3e3");
    $(this).css('border','1px solid grey');
    $('#commentweb').stop(true, true).fadeOut();
  }
);
});

当我离开#web时，我应该做什么才能让动画淡入淡出？当我离开那个div而没有闪烁时（即常量fadeIn和fadeOut），我该怎么做淡出动画？

我添加了一个小提示来向您展示问题：http://jsfiddle.net/mMB3F/ 当我将鼠标悬停在文本上时，它基本上会发生。

Answer 1

出现此问题的原因是您的注释div位于您指定悬停事件的div内。请注意，当您在下图中显示的突出显示区域（红色）中输入鼠标指针（与注释div相关）时，会发生闪烁。

看一下这个解决方案：http://jsfiddle.net/davidbuzatto/mMB3F/1/

评论div现在具有绝对定位。当鼠标进入时，注释div将显示在指针旁边。当然，现在您需要更改代码以满足您的需求。另一种方法是设置一个div容器，它包含#web div并在其旁边放置另一个div，将它们设置为float。在新div中，您可以使用注释插入div。

Answer 2

更新

我的另一个答案有点太夸张了，你只需要漂浮你的另一个div

#commentweb {float:left}

http://jsfiddle.net/mMB3F/5/

它需要是异步的，stop（）是导致它闪烁的原因，但如果你在分配事件处理程序之前等待淡入淡出完成，则不需要停止。 < / p> <击>

<击> http://jsfiddle.net/u7Q9P/1/

Answer 3

使用jquery .mouseenter()和.mouseleave()来避免这种情况。 这样，你就不必在你的CSS中重新定位任何东西。

请参阅我的回答here了解更多详情