我创建了两个动画，一个用于移动，一个用于桌面。当页面加载时，此方法效果很好，但是当您调整窗口大小时，动画不会改变。
例如，如果您以桌面大小加载页面，则将鼠标悬停在相应部分时会播放桌面动画。但是，如果我将浏览器的大小调整为“移动尺寸”（小于1000像素），则仍会播放台式机的动画。
我已经采用了无数种方法，无法弄清为什么它不能按预期工作。
请参见下面的代码：
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();
})
}
这些指示
if(isMobile){
mobileAnimate();
}
if(!isMobile){
deskTopAnimate();
}
仅在开始时进行评估。我认为您必须将它们调整为功能大小，例如
$(window).resize(function() {
isMobile = isMob();
if(isMobile){
mobileAnimate();
}
if(!isMobile){
deskTopAnimate();
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句