Question

我根据屏幕尺寸触发了两个不同的功能。桌面功能意味着当您在元素上悬停/鼠标中心时会发生动画。

在移动设备上，单击元素时会发生动画。问题是当我从桌面调整到移动设备时，仍然附加了悬停/鼠标中心效果。有人知道如何在调整屏幕大小时删除悬停/鼠标中心。

目前我的代码如下所示。

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 1

用此更改移动部件;

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();
    })
}

如果不起作用，试试那个;

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

调整窗口大小时删除mouseenter函数jquery

1 个答案: