jquery menu slides in and bounces

http://jsfiddle.net/E6cUF/

The idea is that after the page finished loading the grey box slides left fr开发者_如何学JAVAom behind the green box, if possible bounce a little.

Edit: made a new version based on changes people made to the jsfiddle and the comment from Nicola http://jsfiddle.net/RBD3K/

However the grey one should be behind the green one and slide from right to left so it appears

To have it bounce you are missing two things i think:

1) you need to load jquery UI.

2) put the bounce effect after the animate effect:

$('#test').click(function() {
    var $marginLefty = $('.left');
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    }).effect("bounce", { times:5 }, 300);
  });

updated fiddle: http://jsfiddle.net/nicolapeluchetti/E6cUF/4/

Try this . Not sure if this is what you want.

$('#test').click(function() {
    var $marginLefty = $('.left');
    var $marginRight = $('.right');
    $marginLefty.animate({
      marginLeft: 0
    },{ duration: 200, queue: false });
    $marginRight.animate({
      marginLeft: 100
    },{ duration: 200, queue: false });
  });

Update: from your updated fiddle,add for .right position :absolute;z-index:1000 as css

http://jsfiddle.net/E6cUF/11/