Question

这个想法是在页面完成加载后，灰色框从绿色框后面向左滑动，如果可能的话反弹一点。

编辑：基于人们对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/

jquery菜单滑入并弹跳

2 个答案: