Slide DIV Right to Left with jQuery

Question

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.

Solution 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/

Solution 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/