Trying to find a script for re-sizing squares - Any suggestions?

Question

Hello all,

I need a script, preferably jquery, to do the follwoing:

I HAVE FOUR LITTLE SQUARES (i.e. div tags) each a different color nested together to make ONE LARGE SQAURE.

WHEN I HOVER OVER ONE SMALL SQUARE, IT ENLARGES AND COVERS THE ENTIRE NEST. When I move away the mouse, the enlarged sqaure will go back to its original size in the nest.

I hope you understand this.

Is there a script that will do this?

A similar idea of the animation and resizing is found on the Sprint website: link text

But I want the animation of the enlarged square to cover the three other squares in the nest.

Many thanks to everyone.

Erik

Answer 1

This should do what you want:

HTML

<div class="nest">
    <div class="square red"></div>  
    <div class="square blue"></div> 
    <div class="square green"></div> 
    <div class="square yellow"></div> 
</div>    

CSS

/* Creates the coordinate system for absolutely positioned squares */
.nest {
    position: relative;
    width: 200px;
    height: 200px;
}

.square {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
}

.red {
    top: 0;
    left: 0;
    background-color: red;
}

.blue {
    top: 0;
    left: 100px;
    background-color: blue;
}

.green {
    top: 100px;
    left: 0;
    background-color: green;
}

.yellow {
    top: 100px;
    left: 100px;
    background-color: yellow;
}

jQuery

$('.square').each(function(){

    var origTop = $(this).offset().top;
    var origLeft = $(this).offset().left;

    $(this).hover(
        /* mouseover */
        function(){
            $(this).css({zIndex: 2});
            $(this).stop();
            $(this).animate({
                top: 0,
                left: 0,
                width: 200,
                height: 200
            });
        },
        /* mouseout */
        function(){
            $(this).stop();
            $(this).animate({
                top: origTop,
                left: origLeft,
                width: 100,
                height: 100
            }, function(){
                $(this).css({zIndex: 1});  
            });
        }
    );
});