基于CSS3和jQuery实现跟随鼠标方位的Hover特效
今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果。当鼠标滑进的时候，遮罩层会从上次鼠标滑出的方向滑入，当鼠标滑出的时候，遮罩层会跟随鼠标，从鼠标滑出的方向滑出。这是一个十分有趣的效果。
我们使用无序列表来组织缩略图和描述遮罩层：
<ulid="da-thumbs"class="da-thumbs"> <li> <ahref="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning"> <imgsrc="images/7.jpg"/> <div><span>Natalie&JustinCleaningbyJustinYounger</span></div> </a> </li> <li> <!--...--> </li> <!--...--> </ul>
这些列表项将会向左浮动，并且相对定位，因为我们绝对定位描述遮罩层：
.da-thumbsli{
float:left;
margin:5px;
background:#fff;
padding:8px;
position:relative;
box-shadow:01px3pxrgba(0,0,0,0.1);
}
.da-thumbslia,
.da-thumbsliaimg{
display:block;
position:relative;
}
.da-thumbslia{
overflow:hidden;
}
.da-thumbsliadiv{
position:absolute;
background:rgba(75,75,75,0.7);
width:100%;
height:100%;
}
接下来我们将这样做：根据鼠标进入的位置，我们将“from”样式应用给遮罩层，它设置了遮罩层的初始位置。然后我们将使用过渡并将添加最终状态的样式。这样遮罩层就滑入了。当我们离开元素时，我们再次应用“from”样式给遮罩层（尽管现在实际上是滑出）并去除之前的最终状态样式。
嗯，以下就是这个小插件的核心：
this.$el.on('mouseenter.hoverdir,mouseleave.hoverdir',function(event){
var$el=$(this),
$hoverElem=$el.find('div'),
direction=self._getDir($el,{x:event.pageX,y:event.pageY}),
styleCSS=self._getStyle(direction);
if(event.type==='mouseenter'){
$hoverElem.hide().css(styleCSS.from);
clearTimeout(self.tmhover);
self.tmhover=setTimeout(function(){
$hoverElem.show(0,function(){
var$el=$(this);
if(self.support){
$el.css('transition',self.transitionProp);
}
self._applyAnimation($el,styleCSS.to,self.options.speed);
});
},self.options.hoverDelay);
}
else{
if(self.support){
$hoverElem.css('transition',self.transitionProp);
}
clearTimeout(self.tmhover);
self._applyAnimation($hoverElem,styleCSS.from,self.options.speed);
}
});
我们主要是给列表项绑定‘mouseenter'和‘mouseleave'事件，通过_getDir函数我们获得鼠标滑进或滑出的方向（想象检测区域是个被分成四个三角形的矩形）。
你将会看到，在第二个demo中，我们添加了延迟，这样当鼠标从一个角落移到另一个角落的时候不会发生太多的动画。
我希望你可以喜欢这个小特效并觉得很有用！
如果浏览器不支持CSS过渡将会使用jQuery动画。