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

Question

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

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

任何人都知道一个很好的方法来做到这一点？由于

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

$（ '＃菜单BTN'）点击（函数（事件）{

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

}）。

Answer 1

我想你需要这样的东西：

$('#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/

Answer 2

我想你想要做的两个动画：

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

了解.animate()。然后，您可以通过启动第一个动画（向右滑动）来完成此操作，并在其完整处理程序中启动第二个动画（向下滑动）。

顺便说一句，可能相对容易的做到这一点与转换。