jquery.easingの使用
5096 ワード
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> ：jQuery Easing </title>
<meta name="keywords" content="jquery.easing.js, , jquery " />
<meta name="description" content="Helloweba ， XHTML、CSS、jquery、PHP " />
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{width:860px; margin:20px auto}
#alist{margin:10px}
#alist li{float:left; height:24px; line-height:24px; padding:2px 10px; margin:4px; border:1px solid #d3d3d3; background:#f7f7f7; cursor:pointer}
#alist li:hover{background:#fefefe}
#alist li:visited{color:#999}
#show{width:760px; height:50px; background:#f7f7f7; border:1px solid #d3d3d3; margin:10px auto; clear:both}
</style>
<script type="text/javascript" src="http://mall.wiwide.com/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript">
$(function(){
$("#alist li").click(function(){
$(this).css({"color":"#999","background-color":"#fdfdfd"});
var action = $(this).attr('rel');
$('#show').height(50).animate({
height:500},{
easing: action,
duration: 500,
complete:function(){
}
});
});
});
</script>
</head>
<body>
<div id="header">
<div id="logo"><h1><a href="http://www.helloweba.com" title=" helloweba ">helloweba</a></h1></div>
</div>
<div id="main">
<h2 class="top_title"><a href="http://www.helloweba.com/view-blog-212.html">jQuery Easing </a></h2>
<div class="demo">
<ul id="alist">
<li rel="linear">linear</li>
<li rel="swing">swing</li>
<li rel="jswing">jswing</li>
<li rel="easeInQuad">easeInQuad</li>
<li rel="easeOutQuad">easeOutQuad</li>
<li rel="easeInOutQuad">easeInOutQuad</li>
<li rel="easeInCubic">easeInCubic</li>
<li rel="easeOutCubic">easeOutCubic</li>
<li rel="easeInOutCubic">easeInOutCubic</li>
<li rel="easeInQuart">easeInQuart</li>
<li rel="easeOutQuart">easeOutQuart</li>
<li rel="easeInOutQuart">easeInOutQuart</li>
<li rel="easeInQuint">easeInQuint</li>
<li rel="easeOutQuint">easeOutQuint</li>
<li rel="easeInOutQuint">easeInOutQuint</li>
<li rel="easeInSine">easeInSine</li>
<li rel="easeOutSine">easeOutSine</li>
<li rel="easeInOutSine">easeInOutSine</li>
<li rel="easeInExpo">easeInExpo</li>
<li rel="easeOutExpo">easeOutExpo</li>
<li rel="easeInOutExpo">easeInOutExpo</li>
<li rel="easeInCirc">easeInCirc</li>
<li rel="easeInOutCirc">easeInOutCirc</li>
<li rel="easeInElastic">easeInElastic</li>
<li rel="easeOutElastic">easeOutElastic</li>
<li rel="easeInOutElastic">easeInOutElastic</li>
<li rel="easeInBack">easeInBack</li>
<li rel="easeInOutBack">easeInOutBack</li>
<li rel="easeInBounce">easeInBounce</li>
<li rel="easeOutBounce">easeOutBounce</li>
<li rel="easeInOutBounce">easeInOutBounce</li>
</ul>
<div id="show">--- ---</div>
<br/>
</div>
</div>
<div id="footer">
<p>Powered by helloweba.com 、 DEMO， ：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
</div>
</body>
</html>easing.rarダウンロードアドレス