我已经创建了两个动画,一个用于移动设备,一个用于桌面。当页面加载时效果很好,但是当你调整窗口大小时,动画不会改变。
例如,如果你以桌面大小加载页面,当你将鼠标悬停在适当的部分上时,桌面动画就会播放。然而,如果我将浏览器的大小调整为"移动尺寸"(小于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();
})
}
这些说明
if(isMobile){
mobileAnimate();
}
if(!isMobile){
deskTopAnimate();
}
只在开始时求值。我认为你应该把它们放到函数大小调整中,比如
$(window).resize(function() {
isMobile = isMob();
if(isMobile){
mobileAnimate();
}
if(!isMobile){
deskTopAnimate();
}
}
您应该研究一下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();