使用 jquery animate() 的问题答案

【问题标题】：Issue using jquery animate()使用 jquery animate() 的问题
【发布时间】：2014-04-05 03:18:01
【问题描述】：

我有两个问题：

Jquery 的animate() 在 Chrome、Safari 和 Opera 上运行不顺畅时遇到问题。 Jqueryanimate()函数在火狐中运行良好，但在其他浏览器中运行不流畅（只是弹出而不是平滑提升）
当我单击按钮激活 div 时，它会向上移动，但是当我单击以将 div 恢复到正常状态以向下滑动时，它不起作用。

对重写我的代码/逻辑有什么建议吗？谢谢！

HTML：

    <link rel="stylesheet" type="text/css" href="icons-portfolio/foundation-icons/foundation-icons.css">
    <!--  CSS for resets  -->
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <!--  CSS for other styles  -->
    <link rel="stylesheet" type="text/css" href="css/components.css">

    <!--*****Need JS Libraries in head ************ -->
    <!--<script src="js/modernizr.custom.38675.js"></script>-->
    <script src="js/modernizr.custom.79941.js"></script>

    <!--
    This script enables structural HTML5 elements in old IE.
    http://code.google.com/p/html5shim/ -->
    <!--[if lt IE 9]>
    <script src = "//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->    
  </head>
    <body>

    <!-- Part 1: Wrap all page content here -->
    <div class="wrap"> 
      <header>
        <div>
          <h1 class="mainHeadNav">CSS3 Effects 'N Stuff</h1>
        </div>
        <a href="https://github.com/Amechi101/css3effects"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
      </header> 

      <!-- grid -->
      <main class="grid_main">  
        <section class="userBox">
        <div>
          <figure class="user_photo_container">
            <figcaption class="user_name">
              <span>Menu</span>
            </figcaption>
          </figure>
          <ul class="user_inner" id="main-dash">
            <li><a href="https://amechi-egbe.squarespace.com/css3-effects">Back to Portfolio<i class="fi-photo"></i></a></li> 
            <li><a  href="https://www.facebook.com/amechi.egbe">Facebook<i class="fi-social-facebook"></i></a></li>  
            <li><a href="https://twitter.com/FashionIdealist">Twitter<i class="fi-social-twitter"></i></a></li> 
            <li><a href="http://instagram.com/fashion_idealist">Instagram<i class="fi-social-instagram"></i></a></li>
            <li><a id="dashClick" href="#">Dashboard<i class="fi-page"></i></a></li>
          </ul>
        </div>
        </section>

        <section class="boxFeatures box1">
          <div   class="inspire">
            <h2>Transition</h2> 
          </div>
        </section>

        <section class="boxFeatures box2">
            <div class="inspire">
              <h2>Hover & Scale</h2> 
            </div>
        </section>

        <section class="boxFeatures box3">
            <div class="inspire">
              <h2>Sideways Flip</h2>  
            </div>
        </section>

        <section class="boxFeatures box4">
            <div class="inspire">
              <h2>3D</h2>  
            </div>
        </section>

      <!-- Dashboard start -->
        <div id="Dashboard"> 
          <h2 class="dashTitle">Project Information</h2>
          <div class="dashInnerAdd">
            <p>
              Welcome to my project CSS3 Effects N' Stuff! I started this project to develop different cool effects using the new CSS3 Properties. Feel free to fork over the repository and contribute! If you like the project and want to chat email me: <a href="mailto:amechiegbe@gmail.com" target="_top">amechiegbe@gmail.com</a>
            </p> 
          </div> 
        </div>
      </main>  <!-- end grid main-->
    </div> <!--end wrap -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="js/application.js"></script>

Javascript：

$(function() {
    //Modernizer Test
    Modernizr.addTest("keyframe", Modernizr.testAllProps('animationName'));
    Modernizr.prefixed('requestAnimationFrame', window, true);

    // global functions
    var dash = $('#Dashboard');
    var dashBtn = $('#dashClick');
    var clicked = false;

    dashBtn.on('click',function (e) {
        e.preventDefault();

        if(clicked === true || clicked === false) {
            dash.animate({"top":0}, 400, function () {
                console.log('Up');
            });
        } else {
            clicked = true;
            dash.animate({"top":600}, 400, function () {
                console.log('Down');
            });
        }
    });

    //make it height of document
    dash.document.height();
});

【问题讨论】：

如果您没有将代码发布给我们看，很难建议您修改代码...
LOL "对重写我的代码有什么建议吗？"并且没有代码暴露！
哎呀！这对我来说有点尴尬！很抱歉！
您确定这是 jQuery 问题而不是 Modernizr 问题吗？
"if(clicked === true || clicked === false)" 当这个 if 没有真正的回报时？

标签： javascript jquery html css animation

【解决方案1】：

如果没有您的代码，很难看出您正在使用哪种效果或如何缓和它。您可以使用 .animate 的属性来更改其流畅运行的方式。 https://api.jquery.com/animate/

.animate( properties [, duration ] [, easing ] [, complete ] )

默认的缓动是 Swing。

我会说尝试线性...对我来说更“流畅”。 http://api.jqueryui.com/easings/

【讨论】：