如何在窗口中更改jQuery的动画值调整

我必须根据窗口宽度jQuery的动画：如何在窗口中更改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像素宽度，它适用于参数，因为它应该这样做，但是当我将屏幕拖动到800像素时，动画使相同的动画（顶部60px而不是顶部120px ）。

如果我以800px宽度打开浏览器，它会给出正确的动画（顶部120px）。

有没有办法通过浏览器屏幕拖动来改变动画，访问者不应该被迫刷新正确的动画页面？

我不知道我是否足够清楚，不要犹豫，问我，如果不是！

来源

2015-04-05 Igor Laszlo

// 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);

来源

2015-04-05 21:04:04

非常感谢，它的工作原理！然而，当我调整大小，动画有一个easeInBack（或类似的东西）效果，而不是一个正常的缓解效果，但没关系，它是这样安静的有趣... :) – 2015-04-05 21:27:15

的理由让你遇到的问题是因为你只查询窗口的大小一次，在这个例子中的代码显示了Jquery的调整方法是利用不断更新的窗口大小，因此给你期望的结果。

$("#reset").click(function() { 
 
    $('#element2').animate({ 
 
    'top': '0px' 
 
    }, 400); 
 
}) 
 

 
$(document).ready(function() { 
 
    checkSize(); 
 
}); 
 
$(window).resize(function() { 
 
    checkSize(); 
 
}); 
 

 
function checkSize() { 
 
    if ($(window).width() >= 1100) { 
 
    $('#element1').mouseenter(function() { 
 
     $('#element2').animate({ 
 
     'top': '60px' 
 
     }, 400) 
 
    }); 
 
    } 
 
    if ($(window).width() < 1100) { 
 
    $('#element1').mouseenter(function() { 
 
     $('#element2').animate({ 
 
     'top': '120px' 
 
     }, 400); 
 
    }); 
 
    } 
 
}

#element1, 
 
#element2 { 
 
    position: relative; 
 
} 
 
#element2 { 
 
    background-color: green; 
 
    height: 50px; 
 
    width: 50px; 
 
}

<!doctype html> 
 
<html class="no-js" lang=""> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title></title> 
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
 
    <!-- Place favicon.ico in the root directory --> 
 

 
    <link rel="stylesheet" href="css/normalize.css"> 
 
    <link rel="stylesheet" href="css/main.css"> 
 
    <script src="js/vendor/modernizr-2.8.3.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <!--[if lt IE 8]> 
 
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
 
      <![endif]--> 
 

 
    <div id="element1">Move square</div> 
 
    <button id="reset">Reset</button> 
 
    <div id="element2"></div> 
 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="js/ui.js"></script> 
 
    <script src="js/main.js"></script> 
 

 
</body> 
 

 
</html>

来源

2015-04-05 21:41:33 LiverpoolOwen

谢谢你呢！我也会检查你的解决方案，稍后......谢谢！ – 2015-04-05 21:48:55

如何在窗口中更改jQuery的动画值调整

回答

相关问题