jQuery animate not working on left position

Question

I'm new with jQuery and I'm trying to do something quite simple, but it looks like it's not that simple.

I have a menu inside a DIV, the DIV has a width of 500px and the menu of 250px. Over the menu I put a button. The idea is that when someone click on the button the menu goes from the left of the DIV to the right.

Well, it's not working.

A Fiddle: http://jsfiddle.net/KUR52/ and the code:

<div class="menuWrap">

        <a href="#" class="button"> MENU </a>

        <nav class="menu">

            <ul>
              <li>Lorem ipsum dolor</li>
              <li>Aenean commodo</li>
              <li>Aenean massa</li>
              <li>Lorem ipsum</li>
              <li>Aenean</li>
              <li>Aenean massa</li>
              <li>Lorem ipsum </li>
              <li>Aenean </li>
              <li>Aenean massa cum </li>
            </ul>

        </nav>

CSS

.button {
    display: block;
    background-color: gray;

    height: 50px;
    width: 50px;
}

.menuWrap {
    width: 500px;
    background-color: lightblue;
}
    .menu {
        position: relative;
     /* left:250px; */
        left:0;
        width: 250px;
        background-color: orange;
    }
        .menu ul{
            margin: 0;
            padding: 0;
            list-style:none;
        }

jQuery

$(document).ready(function () {

    $('.button').click(function () {
        $('.menu').toggle(function () {

                $(this).animate({left:'250px'}, 300)

            }, function () {

                $(this).animate({left:'0px'}, 300)

            }

            );
        });
});

I found a couple of possible solutions but i'm not able to make them work, the most promising was this: jQuery - animating 'left' position of absolutely positioned div when sliding panel is revealed But it didn't took me vary far, mostly because I don't understand parseInt and how to use the value I get from it. This is my fail attempt http://jsfiddle.net/W5avM/

What i'm doing wrong?

do you want something like this : http://jsfiddle.net/mohammadAdil/GC2Av/ — Adil Shaikh, Apr 02 '13 at 00:06

Ram · Accepted Answer · 2013-04-02T00:09:46.133

1

It seems you want to use toggle event method, you are misusing this function and also it has been removed from jQuery 1.9. You are using toggle effect method that hides your element and doesn't accept 2 callback functions.

$(document).ready(function () {
    $('.button').click(function () {
        var $menu = $('.menu'),
            val = $menu.css('left') === '250px' ? '0px' : '250px';
        $menu.animate({
            left: val
        }, 300)
    });
});

http://jsfiddle.net/Hh5nH/

edited Apr 02 '13 at 00:09

answered Apr 02 '13 at 00:02

Ram

143,282
16
168
197

That works perfect! Can you give me a little explanation of the 4 line? Thank you very much! – lan.w Apr 02 '13 at 10:01

score 0 · Answer 2 · answered Apr 02 '13 at 00:02

toggle() displays or hides an element. I don't think that is the method you are looking for.

You might want to use toggleClass to change the class on the menu, and set the different position states in CSS. This can be animated using CSS3 transitions. Alternatively, you can bind the click event to a handler which:

Checks the current position.
Depending on the current position, animates the menu to the alternate state

score 0 · Answer 3 · edited Apr 02 '13 at 00:16

0

Try this to get you started:

$('.button').click(function () {
    $('.menu').animate({left:'250px'}, 300);    
});

edited Apr 02 '13 at 00:16

Ram

143,282
16
168
197

answered Apr 02 '13 at 00:07

Eugene

81
5

jQuery animate not working on left position

3 Answers3