CODEWITHSUNDEEP
jqueryhtmlslide
coder
coder

Reputation: 13250

Slide DIV from left

I am trying to work with a simple div(leftContainer) and would like to make it slide from left to its total width on page load and not with a button click.

Here is my code:

<div class="leftContainer ">
<div class="header">Header</div>
<div class="mainbody">
    <p>Body</p>
</div>

​ DEMO

Upvotes: 3

Views: 11027

Answers (4)

kei
kei

Reputation: 20471

$("div.leftContainer")
    .css("margin-left",-$(this).width())
    .animate({
        marginLeft:0
    }, 700);

demo

Upvotes: 3

Nathanael
Nathanael

Reputation: 7153

Try the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function()
    {
        $("div.leftContainer").animate({width:100%}, "slow");
    });
</script>

If you're looking for a fixed width instead of 100%, change that as well. Good luck! If it doesn't work, please be more clear on what you want done, and I'll try to assist you.

Upvotes: 1

Ricardo Binns
Ricardo Binns

Reputation: 3246

made a simple example, dont know what you are trying to do.

http://jsfiddle.net/YCVhH/12/

use animate to do whatever you want animate();

$(".leftContainer").animate({ left: "50%" });

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39872

You can animate the width using jQuery.

http://jsfiddle.net/YCVhH/9/

$('.leftContainer').animate({ width: '100%'});​

Upvotes: 3

Related Questions