Moving Boxes

Boxes that move

by Glynne Turner

HTML

<div id="box1" class="box box1"></div>
<div id="box2" class="box box2"></div>
<div id="box3" class="box box3"></div>

CSS

.box1 {
    background-color:red;
    margin-left:0;
    width:100px;
    height:100px;
}
.box2 {
    background-color:green;
    width:100px;
    height:100px;
}
.box3 {
    background-color:blue;
    width:100px;
    height:100px;
}
.moved {
    background-color:pink;
    cursor:pointer;
}

JavaScript

$(".box").click(function () {
     var box = $(this);
     if (box.hasClass("moved")) {
         box.animate({
             'margin-left': '0',
             height: 100,
             width: 100
         }).removeClass('moved');
     } else {
         $(".box").animate({
             'margin-left': '0',
             height: 100,
             width: 100
         }).removeClass('moved');
         box.animate({
             'margin-left': '200',
             height: 200,
             width: 200
         }).addClass('moved');
     }
 });