Question

我试图为我的一个div创建一个淡入/淡出效果但是它自身的淡入效果工作正常但是当加上淡出效果时，它会使整个div继续闪烁视口区域。看看代码：

    hover.addEventListener('mouseover',function () {$('#cpanel').fadeIn("slow");/*Core.addClass(cpanel,"on");*/},false);
    hover.addEventListener('mouseout', function () {$('#cpanel').fadeOut("slow");/*Core.removeClass(cpanel,"on");*/},false);

光标似乎失去了对象的焦点，因为它反复淡入和淡出。有人可以帮忙吗？

编辑：注释掉的部分是我在实现jquery之前使用的方法。 Core也是我正在使用的另一个库。 cpanel是我想淡入/淡出的div。

根据要求，cpanel HTML：

<div id="cpanel">
            <div class="box"  name="prevImg"><a href="#" id="prevImg"><img class='text' src="nav-prev.gif"/></a></div>
            <div class="box"  name="zoom"><a href="#" id="Zoom"><img class='text' src="nav-zoom.gif"/></a></div>
            <div class="box"  name="back"><a href="#" id="Back"><img class='text' src="nav-home.gif"/></a></div>
            <div class="box"  name="nextImg"><a href="#" id="nextImg"><img class='text' src="nav-next.gif"/></a></div>  
        </div>

悬停div是通过DOM生成的。它是一个隐藏的div，我用它来确保悬停发生在显示容器的中间。

Answer 1

您应该使用悬停方法。

$('your item').hover(function(){$("#cpanel").fadeIn("slow")},function(){$("#cpanel").fadeOut("slow");});

悬停方法有两个功能 - 一个在鼠标输入时激活，另一个在鼠标输出时激活。

有关详细信息，请参阅the jQuery docs。

div对象反复闪烁

1 个答案: