如何在使用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工作期間控制動畫速度

回答

相關問題