1

我想用 jQuery 和 html & 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>

侧边菜单

4

1 回答 1

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');
                }
            }
        });
    });
于 2013-10-31T08:39:56.427 回答