Javascript 使div从左向右滑动

我已经将div设置为

$（'#myDiv'）.css（'visibility'，'hidden'）。我的问题是，如何让它看起来从左向右滑动

这是我尝试过的，但我需要让它从左向右滑动

if($('#myDiv').css('visibility') == 'hidden'){
    $('#myDiv').css('visibility', 'visible');
    $('#myDiv').slideDown('slow');
}

这可能是您的解决方案：

我可以单独使用每个功能，具体取决于您的需要：我使用了两次切换

HTML：

<div id="container">
    <div id="content">
        Place your content here
    </div>
</div>

javascript/jQuery：

function show(el, width, speed, callback){
    $(el).css({"display":"block"});
    $(el).animate({"width":width}, speed, callback);
}

function hide(el, speed, callback){
    $(el).animate({"width":"0px"}, speed, function(){        
        $(el).css({"display":"none"});
        callback();
    });
}

function toggle(el, width, speed, callback){
    console.log($(el).css("width"));
    if($(el).css("width")== "0px")
        show(el,width, speed, callback);
    else
        hide(el, speed, callback);
}

toggle("#container", "150px", 500, null);
setTimeout(function(){toggle("#container", "150px", 500, null);}, 2000);

工作示例：
我建议使用jqueryui@mcgrailm，谢谢。但我只想让潜水器滑一次。因此，一旦它滑动，我需要它在用户退出页面之前一直可见。@NagarajS谢谢。我在谷歌搜索时确实遇到了这个问题。但是我不知道如何将它与我的
.css（'visibility'，'visible'）
方法结合起来。
function show(el, width, speed, callback){
    $(el).css({"display":"block"});
    $(el).animate({"width":width}, speed, callback);
}

function hide(el, speed, callback){
    $(el).animate({"width":"0px"}, speed, function(){        
        $(el).css({"display":"none"});
        callback();
    });
}

function toggle(el, width, speed, callback){
    console.log($(el).css("width"));
    if($(el).css("width")== "0px")
        show(el,width, speed, callback);
    else
        hide(el, speed, callback);
}

toggle("#container", "150px", 500, null);
setTimeout(function(){toggle("#container", "150px", 500, null);}, 2000);