CODEWITHSUNDEEP
jqueryhtmlcss
MmD
MmD

Reputation: 2154

how to control animate speed in during work with jQuery

I want create one side menu with jQuery and html & css. this is my code (I don't know that why don't working this code in JSFiddle site but this code working in my computer!!!).

any way. I want control speed of move menu when menu arrive the end way (for example when I hover on pink button in my code side menu start moving with 200 speed (fast) and when arrived to end way to be slow speed (600-700) and to be slow in end way. )

I so confused please guide me about that!!!

this is my code :

<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

Upvotes: 1

Views: 252

Answers (1)

Ramki
Ramki

Reputation: 166

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

Upvotes: 1

Related Questions