jQuery animation1

by Steven Martin

HTML

<div class="block red"></div>
<div class="block green"></div>
<div class="block yellow"></div>
<div class="block black"></div>
<div class="block purple"></div>
<div class="block aqua"></div>

CSS

div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
.yellow {
    background-color: yellow;
}
.black {
    background-color: black;
}
.purple {
    background-color: purple;
}
.aqua {
    background-color: aqua;
}

JavaScript

$(".block").click(function () {
    $(".block").animate({
        top: 10,
        width: 20

    }, {
        duration: 1000,
        step: function (now, fx) {
            $(".block:gt(0)").css("left", now);
        }
    });
});