phantom phantom - 1 month ago 6
jQuery Question

remove mouseenter function jquery on when window is resized

I have two different functions that I trigger depending on screen size. The desktop function means that when you hover/mouseenter over an element an animation occurs.

On mobile the animation occurs when you click on the element. The issue is when i resize from a desktop to a mobile the hover/mouseenter effect is still attached. Does anyone know how I can remove the hover/mouseenter when the screen is resized.

Currently my code looks like the below.

var isMobile = isMob();

function isMob() {
if($(window).width() > 1000) {
return false;
}
return true;
}

$(window).resize(function() {
$('.hover-zone').css('display', 'block');
isMobile = isMob();
if(isMobile){
mobileAnimate();
}
if(!isMobile){
deskTopAnimate();
}
});

if(isMobile){
mobileAnimate();
}

if(!isMobile){
deskTopAnimate();
}

function deskTopAnimate() {
$('.hover-zone').mouseenter(function(){
desktopAnimateOut.play();
});

$('.desktop-close').click(function(){
desktopAnimateOut.reverse();
})
}

function mobileAnimate() {
//current attempt to prevent
$('.hover-zone').mouseenter(function(){
return;
})
$('.hover-zone').click(function(){
animateOut.play();
});

$('.mobile-close').click(function(){
animateOut.reverse();
})
}

Answer

Change the mobile part with that;

function mobileAnimate() {
    //current attempt to prevent
    $('.hover-zone').off('mouseenter'); // removes the bind
    $('.hover-zone').click(function(){
        animateOut.play();
    });

    $('.mobile-close').click(function(){
        animateOut.reverse();
    })
}

If that doesn't work try that one;

$(document).off('mouseenter','.hover-zone');

Hope this helps.