Jquery動畫向左滑動（擴展）並向下滑動

我不是很熟悉jquery的動畫，我需要創建一個元素，點擊另一個元素時，元素應該從左向右滑動（當前隱藏在另一個元素的後面）。Jquery動畫向左滑動（擴展）並向下滑動

然後在從左向右延伸完整後顯示其完整內容（如下拉菜單）。我嘗試使用過渡效果，但它不是那麼強大（在靈活性/控制方面）

任何人都知道一個很好的方法來做到這一點？由於

[編輯]她一個jsfiddle of what I am doing so far

$（ '＃菜單BTN'）點擊（函數（事件）{

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

}）。

來源

2014-03-05 LogixMaster

我想你應該熟悉jQuery的動畫，然後回來交一個更具體的問題，包括代碼。 – Niklas

你到目前爲止嘗試過什麼？你能提供你一直在做什麼的代碼樣本嗎？你遇到的具體問題是什麼？ – badAdviceGuy

我已更新我的問題！但不能得到它的工作。 – LogixMaster

我想你需要這樣的東西：

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

來源

2014-03-05 16:41:57 noel

我會做一些[像這樣]（http://jsfiddle.net/6ETK8/） – noel

http://jsfiddle.net/LVLXL/2/這是我到目前爲止。我想在第二次點擊後恢復到原始狀態 – LogixMaster

修正了要反轉的小提琴：http://jsfiddle.net/6ETK8/6/ – noel

我想你想要做的兩個動畫：

動畫從左至右的元素（幻燈片右）
動畫元素，或者第一元素內元素的內容，從從上到下（向下滑動）。
動畫應該一個接一個地運行，而不是並行運行。

瞭解.animate()。然後，您可以通過啓動第一個動畫（向右滑動）來完成此操作，並在其完整處理程序中啓動第二個動畫（向下滑動）。

順便說一句，可能相對容易的做到這一點與轉換。

來源

2014-03-05 16:08:10

我很想知道如何用CSS來做到這一點。我其實也認爲可以通過使用類來使用css來完成。但jquery仍然需要使用，或者更好的js。另外我相信jquery提供更快的解決方案。你用CSS提出什麼建議？任何好的例子？標記的答案顯示了我想要達到的目標。謝謝 – LogixMaster

Jquery動畫向左滑動​​（擴展）並向下滑動

回答

相關問題

Jquery動畫向左滑動（擴展）並向下滑動