jQuery滑出動畫

Question

我正在爲我正在處理的項目在滑出欄上工作，而且我很難獲取動畫來工作。

我的目標是讓它從左向右滑出，而不是像現在一樣從頂部滑出。

下面是我的jQuery代碼，以及我jsfidde提前

感謝喬治

http://jsfiddle.net/tXye8/

$(document).ready(function(){ 
var $button = $('#sideoutButton'); 
var $contain = $('#slideoutContain'); 
var containWidth = $('#slideoutContain').width(); 

//Hide the box 
$contain.hide(); 

//Hide or show the container on button click 
$button.click(function(){ 
    if ($contain.is(":visible")) { 
     $contain.hide(); 
     $button.css("left", 0); 
    } 
    else { 
     $contain.show(400, buttonMove()); 
    } 
}); 

function buttonMove(){ 
    $button.css("left", function(value) { 
     return 0 + containWidth; 
    }); 
} 
    }); 

Answer 1

如果你知道它應該有多寬是，你可以做到這一點CSS：

#mycontainer { 
    width: 0; 
    transition: width 400ms ease; 
} 

#mycontainer.expand { 
    width: 400px; //or whatever your width is 
} 

和只需使用JS/jQuery來切換一個類#mycontainer