Question

我有两个问题：

问题是Jquery的animate()在Chrome，Safari和Opera上运行不顺畅。 Jquery animate()功能在Firefox中运行良好，但使用其他浏览器无法顺利运行（只是弹出而不是顺利提升）
当我点击按钮激活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();
});

Answer 1

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

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

默认缓动是Swing。

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

使用jquery animate（）的问题

1 个答案: