実行結果
例: スクリプトなし（CSSのみ）
例A: 上から下へアニメーション
例B: 右から左へアニメーション
例C: 1色フェード
例D: 2色フェード
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery plugin: wSlide | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="/content/lib/jquery/jquery.backgroundPosition-1.02.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/* 例A: 上から下へアニメーション */
$('#navA a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
/* 例B: 右から左へアニメーション */
$('#navB a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
/* 例C: 1色フェード */
$('#navC a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
/* 例C: 2色フェード */
$('#navD a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
</script>
<!-- CSS -->
<style type="text/css">
h2 { clear:both; }
ul {list-style:none;margin:0;padding:0;overflow:hidden;}
li {float:left;width:100px;margin:0;padding:0;text-align:center;list-style:none;}
li a {display:block;padding:5px 10px;height:100%;color:#fff;text-decoration:none;border-right:1px solid #FFF;}
li a {background:url("/content/img/ajax/background_image_animation_bg.jpg") repeat 0 0;}
li a:hover, li a:focus, li a:active {background-position:-150px 0;}
#navA a {background:url("/content/img/ajax/background_image_animation_bg2.jpg") repeat -20px 35px;}
#navB a {background:url("/content/img/ajax/background_image_animation_bg.jpg") repeat 0 0;}
#navC a {background:url("/content/img/ajax/background_image_animation_bg3.jpg") repeat 0 0;}
#navD a {background:url("/content/img/ajax/background_image_animation_bg3.jpg") repeat 0 0;}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://snook.ca/archives/javascript/jquery-bg-image-animations/'>Using jQuery for Background Image Animations</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>例: スクリプトなし（CSSのみ）</h2>
<ul id="noscript">
<li><a href="#">TOP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h2>例A: 上から下へアニメーション</h2>
<ul id="navA">
<li><a href="#">TOP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h2>例B: 右から左へアニメーション</h2>
<ul id="navB">
<li><a href="#">TOP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h2>例C: 1色フェード</h2>
<ul id="navC">
<li><a href="#">TOP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h2>例D: 2色フェード</h2>
<ul id="navD">
<li><a href="#">TOP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- CODE / -->
</div>
</body>
</html>