|
ここでは、一般的に使用されるアニメーション関数をいくつか示します。
1. animate()
animate() メソッドは、CSS プロパティ セットのカスタム アニメーションを実行します。
このメソッドは、CSS スタイルを通じて要素をある状態から別の状態に変更します。 CSS プロパティの値が徐々に変化し、アニメーション効果を作成できます。
アニメーションできるのは数値のみです(「margin:30px」など)。文字列値はアニメーション化できません（「background-color:red」など）。
ヒント: 相対アニメーションを作成するには、「 」 または 「-=」 を使用してください。
例: 高さを変更して要素にアニメーションを適用する:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("#box").animate({
height: "300px"
});
});
$("#btn2").click(function() {
$("#box").animate({
height: "100px"
});
});
});
</script>
</head>
<body>
<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>
##2、hide()、show()、および toggle( )
- hide() メソッドは、選択した要素を非表示にします。
- show() は選択した要素を表示します
- toggle(): Hide() メソッドと show() メソッドを切り替えます
例: 要素の表示または非表示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").hide();
});
$(".btn2").click(function() {
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>
</html>
3、slideUp()、slideDown() およびslideToggle()
- slideUp() メソッド: 選択した要素をスライドして非表示にします。
- slideDown() メソッド: 選択した要素をスライドして表示します。
- slideToggle() メソッド: slideUp() メソッドと slideDown() メソッドの切り替え
例: スライドして <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").slideUp();
});
$(".btn2").click(function() {
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">上滑</button>
<button class="btn2">下滑</button>
</body>
</html>
4、fadeIn()、fadeOut()、fadeToggle()
- fadeIn () メソッドを段階的に実行します。選択した要素の不透明度を非表示から表示(フェード効果)に変更します。
- fadeOut() メソッドは、選択した要素の不透明度を表示から非表示に徐々に変更します (フェード効果)。
- fadeToggle(): fadeIn() メソッドと fadeOut() メソッドを切り替える
例: フェードイン効果を使用して <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").fadeOut()
});
$(".btn2").click(function() {
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">淡出</button>
<button class="btn2">淡入</button>
</body>
</html>
5、fadeTo()
fadeTo() メソッドは、選択した要素の不透明度を指定された不透明度に徐々に変更します。値（フェード効果）。 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").fadeTo(1000, 0.4);
});
});
</script>
</head>
<body>
<button>逐渐改变P元素的不透明度</button>
<p>这是一个段落。</p>
</body>
</html>
....
[推奨学習: jQuery ビデオ チュートリアル 、Web フロントエンドビデオ ＃＃＃】＃＃＃
