Question

我创建了两个动画，一个用于移动设备，另一个用于桌面设备。这在页面加载时效果很好，但是当您调整窗口大小时，动画不会改变。

例如，如果您以桌面大小加载页面，则当您将鼠标悬停在相应的部分上时，桌面动画会播放。但是，如果我将浏览器的大小调整为“移动大小”（小于1000px），桌面动画仍会播放。

我已经接近了无数种方式，无法弄清楚为什么它不能按预期工作。

请参阅以下代码：

var isMobile = isMob();

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

$(window).resize(function() {
    isMobile = isMob();
});

if(isMobile){
    mobileAnimate(); 
}  
if(!isMobile){  
    deskTopAnimate();
}

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

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

function mobileAnimate() {
    $('.hover-zone').click(function(){
            animateOut.play();
        }
    });

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

Answer 1

这些说明

if(isMobile){
    mobileAnimate(); 
}  
if(!isMobile){  
    deskTopAnimate();
}

仅在开始时进行评估。我认为你必须把它们放入功能调整大小，比如

$(window).resize(function() {
  isMobile = isMob();
  if(isMobile){
      mobileAnimate(); 
  }  
  if(!isMobile){  
      deskTopAnimate();
  }
}

Answer 2

您应该查看window.matchMedia()函数。

var mm = window.matchMedia("only screen and (max-width: 1000px)");
mm.addListener(l => {
    // Handle changes
    if (l.matches) {
        mobileAnimate();
    } else {
        deskTopAnimate();
    }
});
// Initial value
if (mm.matches)
    mobileAnimate();
else
    deskTopAnimate();

触发不同的功能取决于窗口大小调整大小窗口

2 个答案: