jQuery: Slide Left to Right

Hi,

I know how to Slide a DIV from top to bottom and vice-versa. The following code shows how to do it:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$().ready(function(){
$("#clicky").click(function(){
$("#slide").slideToggle("slow");
});

});
</script>

<input name="" type="button" value="Click me" id="clicky"/>
<div id="slide">
<h1>Hello World!</h1>
</div>


Question: Is there anyway I can slide a DIV from left to right and vice-versa?

Please help.


Thanx in advance

Have a look at:-

http://www.webinventif.fr/wslide-plugin/
and demos at http://www.webinventif.fr/wp-content/uploads/projets/wslide/test-wslide-2.htm

Although the site is in French.



Quizmaster: Who was President of Yugoslavia until 2003?
Contestant: Angela Merkel.

You can take advantage of the animate (http://docs.jquery.com/Effects/animate) function:

$(function(){
$("#clicky").click(function(){
$("#slide").animate({marginLeft:'500px'},'slow');
});
});


Hope that helps.

You can take advantage of the animate (http://docs.jquery.com/Effects/animate) function:

$(function(){
$("#clicky").click(function(){
$("#slide").animate({marginLeft:'500px'},'slow');
});
});


Hope that helps.

Two problems:

1) It does not toggle.

2) Its just moving, not sliding (show/hide)

$("#slide").animate({width:'toggle'},2000);

$("#slide").animate({width:'toggle'},2000);


Happens only one time :(

Does not toggle :(

Are you certain? It show/hides the element basing on the width. Works fine at my end.

Plz post your whole code.

Thanx

Are you certain? It show/hides the element basing on the width. Works fine at my end.

Seems to be working now. But It starts sliding after 1.5 seconds of clicking on the button. Any particular reasons for this?

Just Decrease the value from 2000 to 200... you will feel the difference. You can adjust accordingly to get slow or fast effect