$(".panels img").mouseover(function(){
$(this).css('border','1px solid #fff');
}).mouseout(function(){
$(this).css('border','none');
});
$(".panels img").hover(
//マウスが載った時の動作
function () {
var enLarge = this;
$(function () {
setTimeout(function () {
//選択した画像のz-indexを小さくして一番後ろへ
//.animateで拡大
$(enLarge).stop()
.css('zIndex', '50')
.css('cursor', 'default')
.animate({
width: "298px",
height: "248px"
}, 200, "swing");
//選択した以外の画像を縮小
$(".panels img").not(enLarge).stop()
.animate({
width: "50px",
height: "40px"
}, 200, "swing");
}, 220);
});
},
//マウスが外れた時の動作
function () {
var enSmall = this;
//z-index,width,heightをもとの位置へ
$(function () {
setTimeout(function () {
$(enSmall).stop()
.css('zIndex', '100')
.css('cursor', 'pointer')
.animate({
width: "149px",
height: "124px"
}, 200, "swing");
//小さくなっていた画像達も元の大きさに
$(".panels img").not(enSmall).stop()
.animate({
width: "149px",
height: "124px"
}, 200, "swing");
}, 220);
});
});
<div id="box">
<div class="panels" id="one">
<img src="http://dummyimage.com/300x250/e362e3/f5f6ff&text=ONE" />
</div>
<div class="panels" id="two">
<img src="http://dummyimage.com/300x250/5cbdd1/f5f6ff&text=TWO" />
</div>
<div class="panels" id="three">
<img src="http://dummyimage.com/300x250/f08741/f5f6ff&text=THREE" />
</div>
<div class="panels" id="four">
<img src="http://dummyimage.com/300x250/6bbd52/f5f6ff&text=FOUR" />
</div>
</div>
#box {
margin:100px 0 0 50px;
position:relative;
width:300px;
height:250px;
background-color:#f5f5f5;
border:1px solid #808080;
}
.panels {
/*float:left;
width:150px;
height:125px;
margin:0;*/
}
.panels img {
width:149px;
height:124px;
position:absolute;
z-index:100;
cursor:pointer;
}
#one img {
position:absolute;
top:0;
left:0;
}
#two img {
position:absolute;
top:0;
right:0;
}
#three img {
position:absolute;
bottom:0;
left:0;
}
#four img {
position:absolute;
bottom:0;
right:0;
}