Slide DIV Right to Left with jQuery

问题

I'm using jQuery code to animate a div from left to right on load, and then by clicking the close button the div hides from right to left. It's working fine, it's just not going left to right horizontally but diagonally. What am I doing wrong? Here's an example of the code I'm using http://jsfiddle.net/N8NpE/2/

$(function(){
    $("#content-box").hide(0).delay(0).show(500);
});

$(function(){
    $("#ClosePanel").click(function () {
        $("#content-box").hide("slow");
    });
});

Any help will be greatly appreciated.

回答1:

You could try using .animate() instead of .hide() and .show(). This will give you a little more control over everything.

$("#content-box").animate({'width': 240},500);

And to close, include a callback function to set display to none after the animation:

$("#content-box").animate({'width': 0},500,function(){
       $("#content-box").css('display','none');
});

http://jsfiddle.net/N8NpE/6/

回答2:

You should include jQuery UI in your script and change your function a little bit:

$(function(){
$("#content-box").hide(0).delay(0).toggle('slide', {
        direction: 'left'
    }, 1000);
});

Here is an updated jsfiddle: http://jsfiddle.net/N8NpE/4/

回答3:

$('#content-box').animate({width: 'toggle'});

http://jsfiddle.net/U7wGt/

来源：https://stackoverflow.com/questions/19205370/slide-div-right-to-left-with-jquery