javascript - 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 上切换一个类