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

上切换一个类