実行結果
設置サンプルのソース
<!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>エフェクト操作：カスタム：animate(params, options)の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function(){
/* 例1 */
var navDuration = 150; //time in miliseconds
var navJumpHeight = "0.45em";
$('#nav1 li').hover(
function(){
$(this).animate({ top : "-="+navJumpHeight }, navDuration);
},
function() {
$(this).animate({ top : "15px" }, navDuration);
}
);
/* 例2 */
$('#nav_move').css({
width: $('#nav2 li:first a').width()+20,
height: $('#nav2 li:first a').height()+20
});
$('#nav2 li:first a').addClass('cur');
$('#nav2 a').click(function(){
var offset = $(this).offset();
var offsetBody = $('#wrap').offset(); //find the offset of the wrapping div
$('#nav_move').animate(
{
width: $(this).width()+20,
height: $(this).height()+20,
left: (offset.left - offsetBody.left)
},
{
duration: 350,
easing: 'easeInOutCirc'
}
);
$('.cur').removeClass('cur');
$(this).addClass('cur');
return false;
});
/* 例3 */
var fadeDuration = 150; //time in milliseconds
$('#list1 li a').hover(
function() {
$(this).animate({ paddingLeft: '30px' }, fadeDuration);
$(this).children('span').show().animate({ left: -5 }, fadeDuration);
},
function() {
$(this).animate({ paddingLeft: '15px' }, fadeDuration);
$(this).children('span').animate({ left: -35 }, fadeDuration).fadeOut(fadeDuration);
}
);
});
</script>
<style type="text/css">
body {
background:#fff;
}
ul,li {
margin:0; padding:0;
list-style:none;
}
/*********************** 例1 */
#nav1 {
position:relative;
height:4.5em;
overflow:hidden;
border-bottom:1px solid #eee;
padding:0 10px;
float:left;
}
#nav1 li {
position:relative;
float:left;
top:15px;
background:none;
}
#nav1 li a {
padding:.9em 1.1em;
position:relative;
float:left;
display:block;
background:url("/content/img/ajax/tab_body.gif") 0 0 no-repeat;
color:#333;
text-decoration:none;
text-transform:uppercase;
height:195px;
}
#nav1 li a span {
display:block;
position:absolute;
width:10px; height:195px;
background:url("/content/img/ajax/tab_r.gif") 0 0 no-repeat;
top:0; right:0;
}
#nav1 li a:hover,
#nav1 li a:hover span { background-position:0 -194px; color:#3f5f5a; }
#nav1 li a:active,
#nav1 li a:active span { background-position:0 -388px; color:#fff; }
/*********************** 例2 */
#nav2 {
position:relative;
margin:35px 0 35px 0;
float:left;
}
#nav2 li { background:none; }
#nav2 li, #nav2 li a { float:left; }
#nav2 a {
color:#492b23;
display:block;
margin:0 5px 0 0; padding:10px;
position:relative;
z-index:10;
outline:0;
border:0;
text-decoration:underline;
}
#nav_move {
position:absolute;
left:0;
background:#ecf6f5;
display:block;
z-index:1;
left:0;
}
#nav2 a.cur, #nav2 a:hover {
color:#3f5f5a;
text-decoration:none;
}
/*********************** 例3 */
#list1 {
width:400px;
border-top:1px solid #eee;
margin:35px 0 35px 15px;
float:left;
position:relative;
}
#list1 li {
border-bottom:1px solid #eee;
position:relative;
background:none;
float:none;
}
#list1 li a {
color:#492b23;
display:block;
padding:10px;
text-decoration:none;
border:0;
/* IE is the myspace of browsers! */
position:relative;
height:1%;
/* /IE */
}
#list1 li a:hover {
background:#ecf6f5;
color:#3f5f5a;
}
#list1 li a span {
position:absolute;
left:-35px; top:50%;
margin:-4px 0 -4px 10px;
width:24px; height:16px;
background:url("/content/img/icon/color/arrow_next.gif") 0 0 no-repeat;
display:none;
}
/*
In this example there is now IE6 specific Style Sheet but if there was
this hack would go there. Just for the record I do not reccomend using '* html' hack.
Done and done.
*/
* html #list1 li a span {
background:url("/content/img/icon/color/arrow_next.gif") 0 0 no-repeat;
}
.clear {
height:1px;
margin-bottom:10px;
overflow:hidden;
clear:both;
}
</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>エフェクト操作：カスタム：animate(params, options)の使用例 | jQuery</h1>
<p>参照：<a href='http://www.viget.com/inspire/fun-with-jquerys-animation-function/'>Fun With jQuery’s Animate() Function</a></p>
<!-- CODE -->
<h2>例1</h2>
<ul id="nav1">
<li><a href="#">Tab 1<span></span></a></li>
<li><a href="#">Tab Tab 2<span></span></a></li>
<li><a href="#">Tab Tab Tab 3<span></span></a></li>
</ul>
<div class="clear"></div>
<h2>例2</h2>
<ul id="nav2">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link Link 2</a></li>
<li><a href="#">Link Link Link 3</a></li>
<span id="nav_move"></span>
</ul>
<div class="clear"></div>
<h2>例3</h2>
<ul id="list1">
<li><a href="#">Item 1<span></span></a></li>
<li><a href="#">Item Item 2<span></span></a></li>
<li><a href="#">Item Item Item 3<span></span></a></li>
</ul>
<div class="clear"></div>
<!-- / CODE -->
</div>
</body>
</html>