JQuery меню скользит и подпрыгивает

Question

http://jsfiddle.net/E6cUF/

Идея состоит в том, что после завершения загрузки страницы серый прямоугольник скользит слева от зеленого прямоугольника, если это возможно, немного подпрыгивает.

Редактировать: сделана новая версияоснованный на изменениях, сделанных людьми в jsfiddle и комментарии от Nicola http://jsfiddle.net/RBD3K/

Однако серый должен быть позади зеленого и скользить справа налево, чтобы он выглядел

Answer 1

Чтобы он отскочил, вам не хватает двух вещей, которые я думаю:

1) вам нужно загрузить jquery UI.

2) поставить эффект отскока после эффекта анимации:

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

обновленная скрипта: http://jsfiddle.net/nicolapeluchetti/E6cUF/4/

Answer 2

Попробуй это.Не уверен, что это именно то, что вам нужно.

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

Обновление: из обновленной скрипки добавьте .right position :absolute;z-index:1000 как css

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