根据窗口的宽度，我有一个jQuery动画：
if(jQuery(window).width() >= 1100){
jQuery('#element1').mouseenter(function(){
jQuery('#element2').animate({'top':'60px'},400);
});
}
if(jQuery(window).width() < 1100){
jQuery('#element1').mouseenter(function(){
jQuery('#element2').animate({'top':'120px'},400);
});
}
当我调整窗口屏幕大小时，动画不会跟随它。我的意思是，当我以全尺寸（例如1400 px宽度）打开浏览器屏幕时，它可以使用应有的参数，但是当我将屏幕拖动到800 px时，动画会制作相同的动画（顶部60像素而不是顶部120像素） ）。
如果我以800px的宽度打开浏览器，它将显示正确的动画（顶部120px）。
有没有一种方法可以通过浏览器屏幕拖动来更改动画，以使访问者不必为正确的动画刷新页面？
我不知道我是否足够清楚，不要犹豫，问我是否！
// wrap the code in a function to call it multiple times
function windowResize(){
//clear any old event bindings
jQuery('#element1').off("mouseenter");
if(jQuery(window).width() >= 1100){
jQuery('#element1').mouseenter(function(){
jQuery('#element2').animate({'top':'60px'},400);
});
}
if(jQuery(window).width() < 1100){
jQuery('#element1').mouseenter(function(){
jQuery('#element2').animate({'top':'120px'},400);
});
}
}
// call it first time when page loads
windowResize();
// call it on window resize
$( window ).resize(windowResize);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句