Azer0 Azer0 - 1 year ago 86
jQuery Question

[jQuery]How do I make my main divs "appearing" from bottom to top or from top to bottom?

I'm learning jQuery atm and I'd like to animate my CV thanks to it.

So basically my CV is divided into 3 parts : .left / .right / .far-right

What I'd like to do is when you enter my site, whithout clicking anything, you'll have the .left div appearing slowly from top to bottom.

Then the .right div appearing slowly from bottom to top

and finally the last .far-right div appearing slowly from top to bottom as the 1st one.

The method I am currently using is hide/show but my divs are appearing from top left to bottom right which is not what I'm looking for.

Answer Source

HTML:

<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>

CSS:

body {
width: 100%;
height: 100%;
margin: 0;
}

div {
width: 33%;
height: 100%;
float: left;
}

#left {
background-color: red;
margin-top: -100%;
}

#center {
background-color: green;
margin-top: 100%;
}

#right {
background-color: blue;
margin-top: -100%;
}

JavaScript:

$(document).ready(function(){

$("#left").animate({
"margin-top": "0%"
}, 500, function(){
$("#center").animate({
"margin-top": "0%"
}, 500, function(){
$("#right").animate({
"margin-top": "0%"
});
});
});

});


So, you just need to use the .animate method. I have nested the .animates so that they don't execute simultaneously.

Here is a fiddle.

Feel free to ask about any parts of the code you find confusing.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download