Start a function when mouseover and stop it when mousemove

Question!

I want the function mozaic to start when mouseover and stop when mousemove. The first one works properly. Here's the code: http://codepen.io/Wisyr/pen/NRjyWj

$('#name').mouseover(function() {
    var mozaic = setInterval(mosaic, 150);
});

$('#name').mouseout(function() {
    //code...
});

function mosaic() {
    setTimeout(function() {
        $('#name').addClass('shadowLasure');
    }, 0);

    setTimeout(function() {
        $('#name').removeClass('shadowLasure');
        $('#name').addClass('shadowPink');
    }, 50);

    setTimeout(function() {
        $('#name').removeClass('shadowPink');
    }, 100);
}
By : K. Daniek


Answers

As stated by Kevin B, the mouse will move when over the text and prevent the animation from being visible.

But to achieve what you have asked for, use the following

var mozaic;

$('#name').mouseover(function() {
    mozaic = setInterval(mosaic, 150);
});

$(document).mousemove(function() {
   clearInterval(mozaic);
});

Note, that the mosaic variable has to be global, so that the mousemove function has access to it. Initializing it inside the mouseover function will limit its scope to within that function.

Maybe to achieve what you want (effect wise) try to use mouseout on the text.

$('#name').mouseout(function() {
    clearInterval(mosaic);
}
By : JHolub


try something like this.

You need the variable accessible in both functions so it needs to be declared outside those functions and then defined inside the first one and use clearInterval() to cancel an existing interval

var timer;
$('#name').mouseenter(function() {
   timer = setInterval(mosaic, 150);
}).mouseleave(function() {
    clearInterval(timer);
});


This video can help you solving your question :)
By: admin