使用 jquery animate() 的问题

Question

I have two issues:我有两个问题：

Having a problem with Jquery's animate() not working smoothly on Chrome, Safari and Opera. Jquery 的animate()问题在 Chrome、Safari 和 Opera 上无法顺利运行。 The Jquery animate() function works fine in Firefox but does not run smoothly using the other browsers(Just pops up as opposed to raising smoothly) Jquery animate()函数在 Firefox 中运行良好，但在其他浏览器中运行不流畅（只是弹出而不是平滑提升）
When I click the button to activate the div it moves up but when I click to return the div to its normal state to slide back down, it does not work.当我单击按钮以激活 div 时，它会向上移动，但是当我单击以将 div 恢复到正常状态以向下滑动时，它不起作用。

Any suggestions with rewriting my code/logic?关于重写我的代码/逻辑的任何建议？ Thank You!谢谢你！

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: 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();
});

Answer 1

Without your code it is hard to see which effect you are using or how you are easing it.没有您的代码，很难看出您正在使用哪种效果或您如何缓解它。 You can use the properties of .animate to change the way it runs smoothly.您可以使用 .animate 的属性来更改其平滑运行的方式。 https://api.jquery.com/animate/ https://api.jquery.com/animate/

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

The default easing is Swing.默认缓动是 Swing。

I would say to try linear... to me that is more "smooth".我会说尝试线性......对我来说更“平滑”。 http://api.jqueryui.com/easings/ http://api.jqueryui.com/easings/

使用 jquery animate() 的问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-04-04 19:09:02

使用 jquery animate() 的问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-04-04 19:09:02

解决方案1
1 已采纳 2014-04-04 19:09:02