<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
*{ margin:0; padding:0;}
body{ background:#d5dee7;}
a{ color:#c8dce5;}
h3{ margin:10px 10px 0 10px; color:#fff; font-weight:bold; font:18pt Arial, sans-serif; letter-spacing:-1px;}
.boxgrid{ position:relative; float:left; width:325px; height:260px; overflow:hidden; margin:10px; border:solid 2px #8399af; background:#161613;}
.boxgrid img{ position:absolute; top:0; left:0; border:0;}
.boxgrid p{ padding:0 10px; color:#afafaf; font-weight:bold; font:10pt "Lucida Grande", Arial, sans-serif;}
.boxcaption{ position:absolute; float:left; width:100%; height:100px; background:#000; opacity:.8; /* For IE 5-7 */filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */-MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
.captionfull .boxcaption{ top:260px; left:0;}
.caption .boxcaption{ top:220px; left:0;}
</style>
<div class="boxgrid captionfull">
<img src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" />
<div class="cover boxcaption">
<h3>hi~</h3>
</div>
</div>
<div class="boxgrid caption">
<img src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" />
<div class="cover boxcaption">
<h3>hi~</h3>
</div>
</div>
<div class="boxgrid slideright">
<img class="cover" src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" />
<h3>hi~</h3>
</div>
<div class="boxgrid thecombo">
<img class="cover" src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" />
<h3>Florian Nicolle</h3>
</div>
<div class="boxgrid slidedown">
<img class="cover" src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" />
<h3>The Nonsense Society</h3>
</div>
<div class="boxgrid peek">
<a href="http://feeds2.feedburner.com/buildinternet" target="_blank"><img src="http://pic002.cnblogs.com/images/2012/382256/2012070610163870.jpg" /></a>
<a href="http://www.buildinternet.com" target="_blank"><img class="cover" src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" /></a>
</div>
<script src="jquery-1.3.1.js"></script>
<script>
$(document).ready(function () {
$('.boxgrid.captionfull').hover(function () {
// stop()停止所有在指定元素上正在运行的动画
// queue: false使此动画不进入动画队列 比如一个top一个left顺序执行就是队列
// duration(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
$(".cover", this).stop().animate({top: '160px'}, {queue: false, duration: 160});
}, function () {
$(".cover", this).stop().animate({top: '260px'}, {queue: false, duration: 160});
});
$('.boxgrid.caption').hover(function () {
$(".cover", this).stop().animate({top: '160px'}, {queue: false, duration: 160});
}, function () {
$(".cover", this).stop().animate({top: '220px'}, {queue: false, duration: 160});
});
$('.boxgrid.slideright').hover(function () {
$(".cover", this).stop().animate({left: '325px'}, {queue: false, duration: 300});
}, function () {
$(".cover", this).stop().animate({left: '0px'}, {queue: false, duration: 300});
});
$('.boxgrid.thecombo').hover(function () {
$(".cover", this).stop().animate({top: '260px', left: '325px'}, {queue: false, duration: 300});
}, function () {
$(".cover", this).stop().animate({top: '0px', left: '0px'}, {queue: false, duration: 300});
});
$('.boxgrid.slidedown').hover(function () {
$(".cover", this).stop().animate({top: '-260px'}, {queue: false, duration: 300});
}, function () {
$(".cover", this).stop().animate({top: '0px'}, {queue: false, duration: 300});
});
$('.boxgrid.peek').hover(function () {
$(".cover", this).stop().animate({top: '90px'}, {queue: false, duration: 160});
}, function () {
$(".cover", this).stop().animate({top: '0px'}, {queue: false, duration: 160});
});
});
</script>
</body>
</html>