prevent mouseenter function when scrolling

Question

Im trying to prevent a mouseenter function from happening whilst the user is scrolling in jQuery but can't figure it out, any suggestions?

Code:

$(".li").mouseenter(function(){
$(this).children(".work_name").toggleClass("open", 400);

$('.li').mouseleave(function(){
  $(this).children(".work_name").removeClass("open", 400);
});

});

Answer 1

You could implement it as follows:

window.isScrolling = false;
$(window).scroll(function() {
    window.isScrolling = true;
    clearTimeout($.data(this, "scrollTimer"));
    $.data(this, "scrollTimer", setTimeout(function() {
        // If the window didn't scroll for 250ms
        window.isScrolling = false;
    }, 250));
});

Then change your code like this:

$(".li").mouseenter(function(){

// Prevent executing when the user is scrolling
if (window.isScrolling) return;

$(this).children(".work_name").toggleClass("open", 400);

$('.li').mouseleave(function(){
  $(this).children(".work_name").removeClass("open", 400);
});

});