div object flashing repeatedly

Question

i tried to create a fade-in/out effect for one of my divs but the fade-in effect on its own was working fine but when coupled with the fade-out effect, it makes the whole div continue to flash in the viewport area. take a look at the code:

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

the cursor seems to be loosing focus of the object since it fades-in and fades-out repeatedly. can someone please help?

edit: the commented out part is the method i used before i implemented the jquery. also Core is another library i am using. cpanel is the div i want to fade-in/out.

as requested, the 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>

the hover div is generated through DOM. it is a hidden div which i have used just to make sure the hover happens in the middle of the display container.

Answer 1

You should be using the hover method.

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

The hover method takes two functions - one is activated on mouse in, the other on mouse out.

See the jQuery docs for more information.