Question

我根据窗口宽度有一个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）。

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

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

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

您遇到问题的原因是因为您只查询窗口的大小一次，此示例中的代码显示了用于连续更新窗口大小的Jquery resize方法，从而为您提供所需的结果。 / p>

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

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

2 个答案: