CODEWITHSUNDEEP
javascriptjquery
kdjernigan
kdjernigan

Reputation: 397

javascript/jquery: How to prevent from continuing to fade in and fade out

In my example code/jsfiddle: If you move your mouse back and forth quickly over the word testing to where your mouse leaves the div(#footer_logo_container), hovers the div, leaves the div, etc.....it is like the script counts how many times your mouse goes over it, and the div(#powered_by) fades in/fades out/fades in/fades out over and over again depending on how many times your mouse went over the div.

Question: Is there a way to make it that when the mouse goes over the #footer_logo_container, the #powered_by div appears. I also would like to find out if there is a way to have it so it stays faded in for a minimum amount of time (x seconds) once the mouse moves off #footer_logo_container where if the mouse continues to go in and out of the text, it ignores it until the #powered_by is completely faded out.

JSFIDDLE: http://jsfiddle.net/5jEmc/1/

Script:

$(document).ready(function() {
$("#footer_logo_container").hover( 
        function() { $(this).find("#powered_by").fadeIn(); },
        function() { $(this).find("#powered_by").fadeOut(); }
        );         
});

HTML:

<div id="footer_logo_container">
    Testing<br /><br /><br />
    <div id="powered_by">FadeIn</div>
</div>

CSS: #powered_by { display: none; }

Upvotes: 0

Views: 2028

Answers (2)

Surjith S M
Surjith S M

Reputation: 6740

You have to use stop() See more

Working Demo

Jquery

$(document).ready(function() {
$("#footer_logo_container").hover( 
        function() { $(this).find("#powered_by").stop().fadeIn(); },
        function() { $(this).find("#powered_by").stop().fadeOut(); }
        );         
});

If you want delay before executing fadeOut, use this line.

function() { $(this).find("#powered_by").stop()delay(1000).fadeOut(); }

Upvotes: 4

Manish Jangir
Manish Jangir

Reputation: 5437

$(document).ready(function() {
$("#footer_logo_container").hover( 
        function(event) { $(this).find("#powered_by").fadeIn(); 
                   event.stopImmediatePropagation()},
        function(event) {  
            $(this).find("#powered_by").fadeOut();                    
                   event.stopImmediatePropagation()}
        );         
});

Upvotes: -1

Related Questions