JQuery 滑過圖示依方向出現說明 - Codrops

Direction-Aware Hover Effect 元件(範例裡的第一個效果). 官網：http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/ 其它不錯的特效：http://www.minwt.com/css/13153.html

by Shang-De You

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--滑過圖示效果-->
<link rel="stylesheet" type="text/css" href="http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/css/style.css" />
<script src="http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/js/modernizr.custom.97074.js"></script>  
<script type="text/javascript" src="http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/js/jquery.hoverdir.js"></script>


<section>
				<ul id="da-thumbs" class="da-thumbs">
					<li>
						<a href="http://dribbble.com/shots/505046-Menu">
							<img src="http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/1.jpg" />
							<div><span>Menu by Simon Jensen</span></div>
						</a>
					</li>
					<li>
						<a href="http://dribbble.com/shots/504336-TN-Aquarium">
							<img src="http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/2.jpg" />
							<div><span>TN Aquarium by Charlie Gann</span></div>
						</a>
					</li>
					<li>
						<a href="http://dribbble.com/shots/504197-Mr-Crabs">
							<img src="http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/3.jpg" />
							<div><span>Mr. Crabs by John Generalov</span></div>
						</a>
					</li>
					<li>
						<a href="http://dribbble.com/shots/503731-Gallery-of-Mo-2-Mo-logo">
							<img src="http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/4.jpg" />
							<div><span>Gallery of Mo 2.Mo logo by Adam Campion</span></div>
						</a>
					</li>
					<li>	
						<a href="http://dribbble.com/shots/503058-Ice-Cream-nom-nom">
							<img src="http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/images/5.jpg" />
							<div><span>Ice Cream - nom nom by Eight Hour Day</span></div>
						</a>
					</li>
					<li>
						<a...

JavaScript

$(function() {
			
	$(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );

});