jQueryでのアニメーション
7577 ワード
jQueryでのアニメーション
参考資料:
『鋭いjQuery』の著者:
単東林張暁菲魏然出版社:人民郵電出版社1、show()とhide()方法
□パラメータを指定しないと、要素はすぐに表示または非表示になり、アニメーション効果はありません.2、fadeIn()およびfadeOut()メソッド
□2つの方法は、要素の不透明度のみを変更します.
3、slideUp()とslideDown()の方法
□2つの方法は元素の高さだけを変える.
jQueryのアニメーション効果では、時間の長さ(200 ms、400 ms、600 ms)を表す3種類のスピードキー(「slow」、「normal」、「fast」)を指定できます.キーワードを使用する場合は、slideDown(「normal」)などの引用符を付け、数値をパラメータとする場合は、slideUp(1000)などの引用符を付けません.
4、animate(
params,[speed],[easing],[fn])メソッド
params:
アニメーションアトリビュートと最終値としてのスタイルアトリビュートとその値のセットを含むグループ.
speed:
3つの所定の速度の1つである文字列(「slow」,「normal」,or「fast」)またはアニメーション時間の長さを表すミリ秒値(例えば:1000).
easing:
使用する消去効果の名前(プラグインのサポートが必要です).デフォルトのjQueryは「linear」と「swing」を提供します.
fn:
アニメーションの完了時に実行される関数で、要素ごとに1回実行されます.
また、アニメーション効果は、アトリビュート値の前に[+=](+=)または[-=](-=)を追加して累積および累積することもできます.次のようになります.
複数のアニメーションアクションを同時に設定することもできます.次のようになります.
アニメーションを同時に進行させたくない場合は、コードを分割するだけです.次のようになります.
アニメーションの実行後にいくつかの作業を実行する必要がある場合は、コールバック関数を使用して完了できます.次のようになります.
5、stop()
メソッドstop()メソッドを呼び出すと、現在実行されているアニメーションが停止し、現在の状態からアニメーションキュー内の次のアニメーションが実行されます.たとえば、マウスがタイトル要素をすばやく移動したり移動したりすると、前の操作のようにアニメーションの実行を待つ効果はなくなります.
6、toggle()
方法
アニメーションを実行する要素はshow()メソッドとhide()メソッドの間で切り替えられます.
7、slideToggle()
方法
アニメーションを実行する要素は、slideUp()メソッドとslideDown()メソッドの間で切り替えられます.
8、fadeToggle()
方法
アニメーションを実行する要素はfadeIn()メソッドとfadeOut()メソッドの間で切り替わります.
8、fadeTo()メソッド:要素の不透明度を指定した値に漸進する
参考資料:
『鋭いjQuery』の著者:
単東林張暁菲魏然出版社:人民郵電出版社1、show()とhide()方法
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
// ， ； ， 。
$("#head").hover(function() {
$("#content").show("fast");
}, function() {
$("#content").hide("normal");
});
});
</script>
<!-- CSS -->
<style type="text/css">
#panel {width: 500px; border: 1px solid;}
#head {background: yellow;}
.content {display: none;}
</style>
</head>
<!-- HTML -->
<body>
<div id="panel">
<div id="head"> ？</div>
<div id="content" class="content">
（ ） ， 。
。 ， ，
， ，
， ， ， 3 4 ， 2 ， 1 。
3 ， 1、2 3， 。
</div>
</div>
</body>
</html>□パラメータを指定しないと、要素はすぐに表示または非表示になり、アニメーション効果はありません.2、fadeIn()およびfadeOut()メソッド
<script type="text/javascript">
$(function() {
// ， ； ， 。
$("#head").hover(function() {
$("#content").fadeIn("slow");
}, function() {
$("#content").fadeOut(2000);
});
});
</script> □2つの方法は、要素の不透明度のみを変更します.
3、slideUp()とslideDown()の方法
<script type="text/javascript">
$(function() {
// ， ； ， 。
$("#head").hover(function() {
$("#content").slideDown("normal");
}, function() {
$("#content").slideUp(1000);
});
});
</script> □2つの方法は元素の高さだけを変える.
jQueryのアニメーション効果では、時間の長さ(200 ms、400 ms、600 ms)を表す3種類のスピードキー(「slow」、「normal」、「fast」)を指定できます.キーワードを使用する場合は、slideDown(「normal」)などの引用符を付け、数値をパラメータとする場合は、slideUp(1000)などの引用符を付けません.
4、animate(
params,[speed],[easing],[fn])メソッド
params:
アニメーションアトリビュートと最終値としてのスタイルアトリビュートとその値のセットを含むグループ.
speed:
3つの所定の速度の1つである文字列(「slow」,「normal」,or「fast」)またはアニメーション時間の長さを表すミリ秒値(例えば:1000).
easing:
使用する消去効果の名前(プラグインのサポートが必要です).デフォルトのjQueryは「linear」と「swing」を提供します.
fn:
アニメーションの完了時に実行される関数で、要素ごとに1回実行されます.
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
// Id panel click
$("#panel").click(function() {
// 3 333
$(this).animate({left: "333px"}, 3000);
});
});
</script>
<!-- CSS -->
<style type="text/css">
#panel {
position: relative;
height: 100px;
width: 100px;
border: 1px solid #96e555;
background: #b17af5;
cursor: pointer;
}
</style>
</head>
<!-- HTML -->
<body>
<div id="panel"></div>
</body>
</html>また、アニメーション効果は、アトリビュート値の前に[+=](+=)または[-=](-=)を追加して累積および累積することもできます.次のようになります.
<script type="text/javascript">
$(function() {
// Id panel click
$("#panel").click(function() {
// click ， 3 333
$(this).animate({left: "+=333px"}, 3000);
});
});
</script>複数のアニメーションアクションを同時に設定することもできます.次のようになります.
<script type="text/javascript">
$(function() {
// Id panel click
$("#panel").click(function() {
// 3 333 ， 222
$(this).animate({left: "333px", top: "222px"}, 3000);
});
});
</script> アニメーションを同時に進行させたくない場合は、コードを分割するだけです.次のようになります.
<script type="text/javascript">
$(function() {
// Id panel click
$("#panel").click(function() {
// 3 333 ， 3 222 。
$(this).animate({left: "333px"}, 3000).animate({top: "222px"}, 3000);
});
});
</script>アニメーションの実行後にいくつかの作業を実行する必要がある場合は、コールバック関数を使用して完了できます.次のようになります.
<script type="text/javascript">
$(function() {
// Id panel click
$("#panel").click(function() {
// 3 333 ， 3 222 ， 。
$(this).animate({left: "333px"}, 3000).animate({top: "222px"}, 3000, function() {
$(this).css("border", "5px solid blue");
});
});
});
</script>5、stop()
メソッドstop()メソッドを呼び出すと、現在実行されているアニメーションが停止し、現在の状態からアニメーションキュー内の次のアニメーションが実行されます.たとえば、マウスがタイトル要素をすばやく移動したり移動したりすると、前の操作のようにアニメーションの実行を待つ効果はなくなります.
<script type="text/javascript">
$(function() {
// ， ； ， 。
$("#head").hover(function() {
$("#content").stop().fadeIn("slow");
}, function() {
$("#content").stop().fadeOut("slow");
});
});
</script>6、toggle()
方法
<script type="text/javascript">
$(function() {
// ， ； ， 。
$("#head").hover(function() {
$("#content").stop().toggle("slow");
});
});
</script>アニメーションを実行する要素はshow()メソッドとhide()メソッドの間で切り替えられます.
7、slideToggle()
方法
<script type="text/javascript">
$(function() {
// ， ； ， 。
$("#head").hover(function() {
$("#content").stop().slideToggle("slow");
});
});
</script>アニメーションを実行する要素は、slideUp()メソッドとslideDown()メソッドの間で切り替えられます.
8、fadeToggle()
方法
<script type="text/javascript">
$(function() {
// ， ； ， 。
$("#head").hover(function() {
$("#content").stop().fadeToggle("slow");
});
});
</script>アニメーションを実行する要素はfadeIn()メソッドとfadeOut()メソッドの間で切り替わります.
8、fadeTo()メソッド:要素の不透明度を指定した値に漸進する
<script type="text/javascript">
$(function() {
// ， 30% ； ， 。
$("#head").hover(function() {
$("#content").stop().fadeTo("slow", 0.3);
}, function() {
$("#content").stop().fadeOut("slow");
});
});
</script>