如何在 window 调整大小时更改 jquery 动画值

Question

我根据 window 宽度有一个 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);
    });
}

当我调整 window 屏幕大小时，动画不跟随它。我的意思是，当我以全尺寸打开浏览器屏幕时，例如 1400 像素宽度，它会按应有的参数工作，但是当我将屏幕拖动到 800 像素时，动画会制作相同的动画（顶部 60 像素而不是顶部 120 像素).

如果我以 800 像素的宽度打开浏览器，它会显示正确的动画（顶部 120 像素）。

有没有一种方法可以通过浏览器屏幕拖动来更改动画，使访问者不必为正确的动画刷新页面？

不知道我说的够不够清楚，不明白的尽管问我！

Answer 1

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

Answer 2

您遇到问题的原因是因为您只查询了一次 window 的大小，此示例中的代码显示了 Jquery resize 方法用于连续更新window 大小因此给你想要的结果。

$("#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>

如何在 window 调整大小时更改 jquery 动画值

How to change jquery animation value at window resize

jquery

animation

window-resize