Question

Hi i have this javascript function which fades in a div if a user hovers over another div. And when they hover off or more the mouse away the div fades back out.

Does anyone know how i can loop this to run an infinite number of times because at the moment it only does it the once.

<script>
$(".change-profile-pic").hide();
$('.img-with-border').hover(function () {
    if ($('.change-profile-pic').is(":hidden")) {
         $('.change-profile-pic').fadeTo(0, 500);
    } else {    
        $('.change-profile-pic').fadeTo(500, 0);              
    }
});
</script>     

Answer 1

If you really want to use jQuery (not CSS transitions) then with .hover, .fadeIn and .fadeOut and my understanding of

i want it to run again and again each time a user moves their mouse over it and away from it

$(".change-profile-pic").hide();
$('.img-with-border').hover(
    function over() { // fade in on mouseover
        $('.change-profile-pic').fadeIn(500);
    },
    function out() { // fade out on mouseout
        $('.change-profile-pic').fadeOut(500);
    }
);

---

Edit for no fade out when hovering over .change-profile-pic

(function setUpHover() {
    $(".change-profile-pic").hide();
    var timeout = null,
        over = function over() {
            window.clearTimeout(timeout);
            $('.change-profile-pic').fadeIn(500);
        },
        outAfterDelay = function outAfterDelay() {
            $('.change-profile-pic').fadeOut(500);
        },
        out = function out() {
            timeout = window.setTimeout(outAfterDelay, 1000); // give enough time to move to elm here
        };
        
    $('.img-with-border').hover(over, out);
    $('.change-profile-pic').hover(over, out);
}());

Example fiddle (based on jfriend00‘s demo with JavaScript from this answer instead)