Jquery动画向左滑动​​（伸展）并向下滑动

Question

我不太熟悉jquery的动画，我需要创建一个元素，在点击另一个元素时，元素应该从左向右滑动（当前隐藏在另一个元素后面）。

然后在从左向右完全展开后显示其完整内容（如下拉菜单）。我尝试使用过渡效果，但它不是那么强大（就灵活性/控制而言）

任何人都知道这样做的好方法吗？感谢

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

$（'＃menu-btn'）。click（function（event）{

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

}）;

Answer 1

我想你想做两个动画：

1. 从左到右动画元素（向右滑动）
2. 从上到下（向下滑动）为元素的内容或第一个元素内的元素设置动画。
3. 动画应该一个接一个地运行，而不是并行运行。

了解.animate()。然后你可以通过启动第一个动画（向右滑动）来实现这一点，并在其完整的处理程序中，启动第二个动画（向下滑动）。

顺便说一句，转换可能相对容易。

Answer 2

我认为你需要这样的东西：

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

如果那是您的想法，请向下滑动整个。

我更新了小提琴。你有.#whole而不是#whole来阻止这种风格。

修改

请参阅我的分叉小提琴以获得更好的解决方案：http://jsfiddle.net/6ETK8/6/

或使用css过渡：http://jsfiddle.net/6ETK8/7/