CODEWITHSUNDEEP
jqueryjquery-ui
amit
amit

Reputation: 10261

div object flashing repeatedly

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.

Upvotes: 0

Views: 519

Answers (1)

jwoolard
jwoolard

Reputation: 6284

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.

Upvotes: 1

Related Questions