如何在使用jQuery工作期间控制动画速度

我想用jQuery和html创建一个侧面菜单& css。这是我的代码（我不知道为什么不在JSFiddle网站上工作这段代码，但是这段代码在我的电脑里工作!!!）。如何在使用jQuery工作期间控制动画速度

任何方式。当菜单到达终点时我想要移动菜单的控制速度（例如当我在代码侧菜单中悬停在粉红色按钮上时以200速度（快速）开始移动并且在到达终点时速度较慢时（600-700）并在结束方式缓慢。）

我很困惑，请指导我一下！

这是我的代码：

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <link href="menu.css" type="text/css" rel="stylesheet" media="screen"/> 
     <script type="text/javascript" src="../../../../wamp/www/myproject/Map/js/jquery.js"></script> 
     <script type="text/javascript" src="menu.js"></script> 
    </head> 

    <body> 
     <div class="container"> 
      <div id="sidebar-toggle"> 
       <span class="bar"></span> 
       <span class="bar"></span> 
       <span class="bar"></span> 
      </div> 
      <div id="sidebar"> 
       <div class="swipe-area" id="swipe-sidebar"></div> 
      </div> 
     </div> 
    </body> 
</html>

side menu

来源

2013-10-31 kasiri182

看看成'easing'。 - http://api.jquery.com/animate/ – Smamatti

您必须将CSS和Javascript/jQuery代码添加到JSFiddle。 –

我看了这个页面我的朋友，但我想快速打开菜单，并在（及时）（工作）快速冷静，直到完成行动！ – kasiri182

http://jsfiddle.net/Fuwb4/2/

$('#sidebar-toggle').on('mouseenter', function(){ 
     $('#sidebar').stop().animate({ 
      left: '0px' 
     }, { 
      duration: 200, 
      step: function(currentLeft) { 
       if(currentLeft > '-200'){ 
        $('#swipe-sidebar').css('display','block'); 
       } 
      } 
     }); 
    }); 
    $('#sidebar').on('mouseleave', function(){ 
     $('#sidebar').stop().animate({ 
      left: '-270px' 
     }, { 
      duration: 200, 
      step: function(currentLeft) { 
       if(currentLeft < '-200'){ 
        $('#swipe-sidebar').css('display','none'); 
       } 
      } 
     }); 
    });

来源

2013-10-31 08:39:56 Ramki

我的朋友我如何在这段代码中使用easing jQuery？ – kasiri182

为了获得缓解的效果，你应该包括easing plugin.Does上面的代码作为您的reqirement.Go通过我发布的小提琴链接。 http://jsfiddle.net/Fuwb4/2/ – Ramki

如何在使用jQuery工作期间控制动画速度

回答

相关问题