Question

我想用jQuery和html＆amp;创建一个侧面菜单CSS。这是我的代码（我不知道为什么不在JSFiddle网站上运行这段代码，但这段代码在我的电脑上工作!!!）。

任何方式。当菜单到达终点时我想要移动菜单的控制速度（例如当我在我的代码侧菜单中将鼠标悬停在粉红色按钮上时以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

Answer 1

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');
                }
            }
        });
    });

如何在使用jQuery时控制动画速度

1 个答案: