javascript - Jquery动画向左滑动​​(扩展)并向下滑动

Question

我对 jquery 的动画不是很熟悉，我需要创建一个元素，点击另一个元素时，该元素应该从左向右滑动(目前隐藏在另一个元素后面)。

然后在从左到右完全扩展后显示其全部内容(如下拉菜单)。我尝试使用过渡效果来做到这一点，但它并没有那么强大(就灵 active /控制而言)

有谁知道做这件事的好方法吗？谢谢

[编辑] 她的 jsfiddle of what I am doing so far

$('#menu-btn').click(函数(事件){

  $('#whole').animate({
      left: '100px'
  },500,
      function(){
      left: '-100px'
  });

});

Answer 1

我想你需要这样的东西:

$('#menu-btn').click(function(event) {
  $('#whole').animate({
      left: '100px'
  },500,
  function(){
    $('#data').slideDown();
  });
});

如果你是这么想的话，那就把整个滑下来。

我更新了 fiddle 。你有 .#whole 而不是 #whole 这阻止了这种风格。

编辑:

请参阅我的 fork fiddle 以获得更好的解决方案:http://jsfiddle.net/6ETK8/6/

或者使用 css 转换:http://jsfiddle.net/6ETK8/7/