jQueryでイージング付きフェードでマウスアクションの設定

jQuery本体とjquery.easingを読み込み、スムーズなマウスアクションを設定できるようにします。

フェード編

 
<script type="text/javascript" src="js/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js" ></script>
<script type="text/javascript" >
$(document).ready(function (){
$(".transparent a")
.mouseover(function(){ 
$(this).stop().fadeTo(1000,0.2,'easeOutExpo');
})
.mouseout(function(){
$(this).stop().fadeTo(1000,1,'easeOutExpo');
});
});
</script>
 
 
<body class="transparent">
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
</body>
 

IE8で透過しない場合はheadに追加

<meta http-equiv="X-UA-Compatible" content="IE=7">
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

5 × five =