BasicAnimations

Simple CSS Animations

by Jacques Surveyer

HTML

<button id="start">Start Animation</button> 
<button id="moveleft">Move left</button>
<div id="messy">
     <h2>This will be moved?</h2>
    <br>
    <div>
    <div id='block'></div>

CSS

div {
    margin-top: 10px;
    margin-left:10px;
    margin-bottom:2px;
    background-color:blue;
    opacity:1;
    float:left;
    width:400px;
    height:0px;
}
#block {
    position:absolute;
    background-color:#abc;
    left:50px;
    width:90px;
    height:90px;
    margin:5px;
}
}

JavaScript

$("#start").click(function () {
    $("#messy").animate({
        opacity: 0.98,
        height: "250px",
    }, 4000);
});
$("#start").click(function () {
    $("#block").animate({
        "left": "+=50px"
    }, "slow");
});
$("#moveleft").click(function () {
    $("#block").animate({
        "left": "-=50px",
        opacity: "toggle"
    }, "fast");
});