[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.
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.