无论在Google Chrome中做什么，Jquery都不会动画化

Jquery wont animate no matter what in Google Chrome

本文关键字：Jquery 动画 什么 Google Chrome      更新时间：2023-09-26

我的jquery代码得到了"点击"函数，但没有动画，它只是"跳跃"而没有动画。已经挣扎了好几个小时了。

Jquery代码

$( document ).ready(function() {

// Navigation
  $('a[href^="#"]').on('click',function (e) {
  e.preventDefault();
  var target = this.hash;
  var $target = $(target);
  $('html, body').stop().animate({
      'scrollTop': $target.offset().top
  }, 5, 'swing', function () {
      window.location.hash = target;
         });
     });
  });

HTML代码

        <!-- Content -->
<div class="slideBg" id="slideBg">
       <!-- NAVBAR -->
       <div class="row header">
        <nav class="navbar navbar-default navbar-fixed-top col-md-8 col-md-offset-2" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header ">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav menu col-xs-12 col-xs-offset-6 ol-md-12 col-md-offset-6 col-lg-12 col-lg-offset-6">
                <li><a  href="#slideBg"><img class="menuImage" src="img/Slide1/Header/menu/mugIcon.png" alt=""><span class="menuItem">AVALEHT</span></a></li>
                <li><a  href="#slide2"><img class="menuImage" src="img/Slide1/Header/menu/menuIcon.png" alt=""><span class="menuItem">MENÜÜ</span></a></li>
                <li><a  href="#slide3"><img class="menuImage" src="img/Slide1/Header/menu/locationIcon.png" alt=""><span class="menuItem">ASUKOHT</span></a></li>
                <li><a class="" href="#slide4"><img class="menuImage" src="img/Slide1/Header/menu/meistIcon.png" alt=""><span class="menuItem">MEIST</span></a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
      </div>
      <!-- /NAVBAR -->
      <div class="slide1" id="slide1">
       <img class="s1Logo helper" src="img/Slide1/Logo/logo.png" alt="">
       <div class="nool"></div>
     </div>
   </div>

    <div class="slide2" id="slide2">
         <ul class="sideMenu">
          <li id="ahjukoogid" class="sMenuItem dashed">Ahjukoogid</li>
          <li id="magusadAmpsud" class="sMenuItem dashed">Magusad Ampsud</li>
          <li id="plaadikoogid" class="sMenuItem dashed">Plaadikoogid</li>
          <li id="soolasedAmpsud" class="sMenuItem dashed">Soolased Ampsud</li>
          <li id="tordid" class="sMenuItem dashed">Tordid</li>
          <li id="tordiloigud" class="sMenuItem dashed">Tordilõigud</li>
          <li id="tryhvlid" class="sMenuItem dashed">Trühvlid</li>
          <li id="quiche" class="sMenuItem dashed">Quiche</li>
        </ul>
    <div class="tryhvlid">
      <!-- Nimed ja Hinnad -->
    </div>
    <div class="nool"></div>
  </div>

     <div class="slide3" id="slide3">
    asd
           <div class="nool"></div>
         </div>
           <div class="slide4" id="slide4">
    asd
           <div class="nool"></div>
         </div>

我试过很多东西。尝试了不同的方法来获得动画效果。我还测试了document.ready函数是否带有alert。我检查了jquery是否得到了click函数，它确实得到了。一切看起来都很正常，但就是不能流畅地动画或滚动。

这是因为在动画的duration参数中，您传递的5被解释为5毫秒。如果你想要一个5秒的动画，可以试试5000。

 $('html, body').stop().animate({
      'scrollTop': $target.offset().top
  }, 5000, 'swing', function () {
      window.location.hash = target;
      });
   });
});

编辑

显然，这是一个已知的问题。当将html/body的x-overflow属性设置为隐藏时，jQuery的animate()在Chrome中表现不佳。相反，它最终完全跳过了动画。有关详细信息，请参阅此线程。

不确定您期望实现什么。您是否尝试过不使用swing？类似这样的东西：

$( document ).ready(function() {
  // Navigation
  $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();
    var target = $(this).attr('href');
    var $target = $(target);
    $('html, body').animate({
      'scrollTop': $target.offset().top
    }, 'slow');
  });
});

JSFiddle

相关文章：