Question

我正在做一个简单的动画，如果屏幕width is > 800px并且不做任何事情（只保留默认的css），如果它是＆lt; 800，问题是：

窗口宽度＆gt; 800：我刷新它不动画的页面，除非我调整一点以触发调整大小功能。
，窗口＆lt; 800：如果我完成了动画（＆gt; 800px），然后调整大小到＆lt; 800，动画仍然继续，而不仅仅是尊重css而已。有什么提示吗？

JS：

  $(document).ready(function () {
      $(window).resize(function () {
          if ($(window).width() > 800) {
              $('#upBar, nav').hover(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '60px'
                  }, 200);
              });


              $('#upBar, nav').mouseleave(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '45px'
                  }, 200);
              });
          } else {}
      })
  })

HTML：

<html lang="en" />
<head>
    <meta charset="UTF-8">
    <title>Intertrafego - Quem Somos</title>
    <link rel="stylesheet" href="css/navBar.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/stylesAboutUs.css">
    <meta name="viewport" content="width=width-device, initial-scale=1.0" />
</head>
<body data-stellar-background-ratio="0.2">
    <div id="upBar"></div>
    <div id="middleBar"></div>
    <div id="middleImg"></div>
    <div id="missValBar"></div>
    <div id="wrapper">
        <header>
            <nav>   <a href="index.html"><img id="logo" src="imgs/logo.png"></a>
    <a href="quem_somos.html"><div id="langMobile">EN<br>&#8595;<br>Pt</div></a>

                <div id="btnMobile">
                    <img src="imgs/mobileBtn.jpg">
                </div>
                <ul>
                    <li id="lang"><a id="PT" href="quem_somos.html">PT</a> / <a id="EN" href="#">EN</a>

                    </li>   <a href="news.html"><li>News</li></a>
    <a href="logistics.html"><li>Logistics</li></a>
    <a href="services.html"><li>Services</li></a>
    <a href="#"><li>About Us</li></a>

                </ul>
            </nav>
        </header>

Answer 1

FIDDLE

$(document).ready(function () {
    doAnnimation();
    $(window).resize(function () {
        $('#upBar').off('mouseenter mouseleave', annimateNav);
        doAnnimation();
    });
});

function doAnnimation() {
    if ($(window).width() > 800) {
        $('#upBar').on('mouseenter mouseleave', annimateNav);
    }
}

function annimateNav() {
    var height = '60px';
    if( $('#upBar').hasClass('animating') ) {
        height = '45px';
    }
    $('#upBar').toggleClass('animating').stop(true).animate({
        height: height
    }, 200);
}

我建议您查看this问题，以便有效地处理调整大小事件。

Answer 2

如果您的网页以＆gt;开头800事件是附加的，永远不会解除绑定。你应该在else语句中添加unbinds。它的外观如何JSFiddle：

else {
    $('#upBar, nav').unbind("hover");
    $('#upBar, nav').unbind("mouseleave");
}

你也需要在文档就绪上运行代码

$(document).ready(function () {
          if ($(window).width() > 800) {
              $('#upBar, nav').hover(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '60px'
                  }, 200);
              });


              $('#upBar, nav').mouseleave(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '45px'
                  }, 200);
              });
          }
  })

Answer 3

首先：要触发resize事件，只需在设置处理程序后调用resize：

第二：在屏幕较小时停止播放动画，使用调整大小处理程序中调用的jQuery .off method删除事件处理程序。

整个代码看起来像这样：

$(document).ready(function () {
  var hoverHandler = function() {
      $('#upBar, nav ul').stop(true).animate({
          height: '60px'
      }, 200);
  };

  var mouseleaveHandler = function() {
      $('#upBar, nav ul').stop(true).animate({
          height: '45px'
      }, 200);
  };

  var handlersAdded = false;               // this prevents from multiple event binds

  $(window).resize(function () {
      var $hoverTarget = $('#upBar, nav');

      if ($(window).width() > 800) {
          if(!handlersAdded) {
              $hoverTarget.hover(hoverHandler)
                  .mouseleave(mouseleaveHandler);

              handlersAdded = true;
          }
      } else {
          $hoverTarget.off('hover', hoverHandler)
              .off('mouseleave', mouseleaveHandler);

          $('#upBar, ul nav').stop(true).removeAttr('style');

          handlersAdded = false;
     }
  }).resize();
});

jQuery调整大小问题

3 个答案: