CODEWITHSUNDEEP
jqueryhtmlcss
Gas li
Gas li

Reputation: 3

fadeIn fadeOut element when hovering another, not working properly

I have this HTML:

<div id="mask"></div>
<div id="menu">
    <ul>
        <li><a href"#"></a></li
        <li><a href"#"></a></li
        <li><a href"#"></a></li
    </ul>
</div

And CSS:

#mask {
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:130;
    background-color:rgba(10,10,10, 0.6);
    display: none;
}

I want #mask to appear with fade on #menu hover and I do this with following jquery:

<script type="text/javascript">
   $(function(){
     $('#menu').hover(over, out);
   });

   function over(event)
   {
     $('#mask').fadeIn(1000);
     $('#mask').css("display","block");
   }
   function out(event)
   {
     $('#mask').fadeOut(1000);
   }
 </script>

It works ok, but the problem is, if the mouse is moving in and out of #menu many times before the timeout of 1sec expires, then the #mask keeps fade in and out for as many times the mouse has been moved over and out of the menu...i need something in the code to stop triggering hover action for 1sec after the first trigger.

I hope you understood what i mean.

Thank you.

SOLVED, working a bit on Craig Riter`s idea with .stop() method. added one line before .fadeIn

<script type="text/javascript">
$(function(){
    $('#menu-eng').hover(over, out);
});
function over(event)
{      
$('#mask').stop("opacity","0.9");       
$('#mask').fadeIn(1000);
$('#mask').css("display","block");
}
function out(event)
{      
$('#mask').fadeOut(1000);
}
</script>

Upvotes: 0

Views: 666

Answers (3)

Dawn T Cherian
Dawn T Cherian

Reputation: 5406

Just stop the current animation by using .stop() for preventing this issue. Code is given below.

$("#mask").hover(function(){ 
    $(this).stop(true, true).fadeOut(100)
}, function(){
       $(this).stop(true, true).fadeIn(50)
});

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Before performing the fadeIn or fadeOut check if the #mask is currently being animated.

    function over(event)
    {
        if(!$("#mask").is(":animated")){
         $('#mask').fadeIn(1000);
         $('#mask').css("display","block");
        }
    }

    function out(event)
    {
       if(!$("#mask").is(":animated")){
         $('#mask').fadeOut(1000);
       }
    }

JS Fiddle: http://jsfiddle.net/nMN62/

Upvotes: 1

Craig Riter
Craig Riter

Reputation: 106

It sounds like the jQuery animations are queuing up and continue to execute. You should look at trying to use the .stop() method before doing the .fadeIn() so that the you can terminate the old animation.

http://api.jquery.com/stop/

Upvotes: 0

Related Questions