之前的一篇文章JS判断从哪个方向判断进入一个容器中提到了一个效果，通过计算鼠标位置以及一些数学方法，来判断鼠标是从哪个方向进入以及离开该容器的。今天我这里搜索到一个不错的实战效果，分享给大家。是基于jquery的一个插件。该效果出品人是老外，原文地址
该效果用到的几点技术，一个是css3的动画效果，这里不是采用的js的动画效果，所以兼容性存在不足。另外就是之前提到的针对进入方向的判断。
效果演示地址：http://www.niumowang.org/demo/hoverDir/
代码构成，HTML标签部分
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>.da-thumbs li {
float: left;
margin: 5px;
background: #fff;
padding: 8px;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
display: block;
position: relative;
}
.da-thumbs li a {
overflow: hidden;
}
.da-thumbs li a div {
position: absolute;
background: rgba(75,75,75,0.7);
width: 100%;
height: 100%;
}CSS动画关键部分，采用css3的动画效果，以及添加方向的class
.da-thumbs li a div.da-animate {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* 动画开始阶段的class */
.da-slideFromTop {
left: 0px;
top: -100%;
}
.da-slideFromBottom {
left: 0px;
top: 100%;
}
.da-slideFromLeft {
top: 0px;
left: -100%;
}
.da-slideFromRight {
top: 0px;
left: 100%;
}
/* 动画结果阶段的class: */
.da-slideTop {
top: 0px;
}
.da-slideLeft {
left: 0px;
}脚本部分，就是引入jquery文件，引入该插件。然后调用该插件即可。
$(function() {
$('#da-thumbs > li').hoverdir();
});
该插件支持动画效果，延迟动画效果，和反向
$('#da-thumbs > li').hoverdir( {
hoverDelay : 50,
reverse : true
});
hoverDelay是延迟加载时间，越大时间越长。reverse是是否反向，true表示反向，默认false