Trying to find a script for re-sizing squares - Any suggestions?
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 e开发者_JS百科nlarged 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
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});
});
}
);
});
精彩评论