javascript - 向左/向右滑动 div 而不是向上/向下滑动

Question

有没有一种简单的方法可以根据我在下面提供的向上/向下的代码片段将其变成从左到右的滑动 div？

所以宁愿让它向上/向下，让它向左/向右？

$(document).ready(function() {

    $("#open").click(function(){
        $("div#panel").slideDown("slow");

    }); 

    $("#close").click(function(){
        $("div#panel").slideUp("slow"); 
    });     

    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });

});

Answer 1

您可以使用隐藏动画从左/右滑动它。

$(document).ready(function() {

    $("#open").click(function(){
        $("div#panel").show('slide', {direction: 'right'}, "slow");
    }); 

    $("#close").click(function(){
        $("div#panel").hide('slide', {direction: 'left'}, "slow");
    });     

    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });

});

Answer 2

您可以使用 jQueryUI 和幻灯片效果。

例子：

$("div#panel").hide("slide", {direction: "left" }, 1000);
$("div#panel").show("slide", { direction: "right" }, 1000);

Answer 3

您可以使用 jQuery 动画http://api.jquery.com/animate/

$(document).ready(function() {

    var  myDivWidth = $( "div#panel" ).width();

    $("#open").click(function(){
        $( "div#panel" ).css({'width' : '0' }).animate({width: myDivWidth}, 'slow');
    }); 

    $("#close").click(function(){
        $( "div#panel" ).animate({width: 0}, 'slow'); 
    });      

});

更新 ：

这是 jsfiddle http://jsfiddle.net/ck4PX/
更新了 jsfiddle http://jsfiddle.net/QGXQm/