jQueryの効果
jQuery エフェクト - 非表示と表示
非表示、表示、切り替え、スライド、フェード、アニメーション化します!
jQuery Hide() および show()
jQuery では、hide() メソッドと show() メソッドを使用して次のことを行うことができます。 HTML 要素の非表示と表示
構文:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
オプションのspeedパラメータは、非表示/表示の速度を指定します、「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、非表示または表示が完了した後に実行される関数の名前です。
jQuery toggle()
jQuery では、toggle() メソッドを使用して Hide() メソッドと show() メソッドを切り替えることができます。
非表示の要素を表示し、表示されている要素を非表示にします。
構文:
$(selector).toggle(speed,callback);
オプションのspeedパラメータは、非表示/表示の速度を指定し、「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、toggle()メソッドの完了後に実行される関数の名前です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".hot").toggle();
});
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<div class="hot">
<img src="http://www.pp3.cn/uploads/201510/2015102409.jpg" height="300px" width="200px">
<p>这是一张图片</p>
</div>
</body>
</html>Fade
jQueryのフェードメソッド
jQueryを使用すると、要素のフェード効果を実現できます。
jQueryには以下の4つのフェードメソッドがあります:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn()メソッド
jQuery fadeIn()はフェードインに使用します。隠された要素。
構文:
$(selector).fadeIn(speed,callback);
オプションのスピードパラメータは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。 .
オプションのコールバック パラメーターは、フェーディングの完了後に実行される関数の名前です。
jQuery fadeOut()メソッド
jQuery fadeOut()メソッドは、表示要素をフェードアウトするために使用されます。
構文:
$(selector).fadeOut(speed,callback);
オプションのスピードパラメータは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、フェーディング完了後に実行される関数の名前です。
jQuery fadeToggle() メソッド
jQuery fadeToggle() メソッドは、fadeIn() メソッドと fadeOut() メソッドを切り替えることができます。
fadeToggle() は、要素がすでにフェードアウトしている場合に、要素にフェードイン効果を追加します。
fadeToggle() は、要素がすでにフェードインしている場合、要素にフェードアウト効果を追加します。
構文:
$(selector).fadeToggle(speed,callback);
オプションのspeedパラメータは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、フェーディング完了後に実行される関数の名前です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>jQuery fadeTo() メソッド
jQuery fadeTo() メソッドを使用すると、指定された不透明度 (0 と 1 の間の値) へのグラデーションが可能になります。
構文:
$(selector).fadeTo(speed,opacity,callback);
必須のspeedパラメータは、効果の持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
fadeTo() メソッドの必須の不透明度パラメーターは、フェード効果を指定された不透明度 (0 から 1 までの値) に設定します。
オプションのコールバックパラメータは、関数の完了後に実行される関数の名前です。
Sliding
jQuery のスライディング メソッド
jQuery を使用すると、要素にスライド効果を作成できます。
jQueryには以下のスライドメソッドがあります:
slideDown()
slideUp()
slideToggle()
jQuery slideDown()メソッド
jQuery slideDown()メソッドは要素を下にスライドさせるために使用されます。
構文:
$(selector).slideDown(speed,callback);
オプションのスピードパラメータは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、スライディングの完了後に実行される関数の名前です。
jQuery slideUp()メソッド
jQuery slideUp()メソッドは、要素を上にスライドさせるために使用されます。
構文:
$(selector).slideUp(speed,callback);
オプションのスピードパラメータは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、スライディングの完了後に実行される関数の名前です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>jQuery slideToggle() メソッド
jQuery slideToggle() メソッドは、slideDown() メソッドと slideUp() メソッドを切り替えることができます。
要素が下にスライドする場合、slideToggle() は要素を上にスライドさせます。
要素が上にスライドする場合、slideToggle() は要素を下にスライドします。
$(selector).slideToggle(speed,callback);
オプションのspeedパラメータは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、スライディングの完了後に実行される関数の名前です。
Animation
jQuery アニメーション - animate() メソッド
jQuery animate() メソッドは、カスタム アニメーションを作成するために使用されます。
構文:
$(selector).animate({params},speed,callback);必須の params パラメータは、アニメーションを形成する CSS プロパティを定義します。
オプションの速度パラメーターは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、アニメーションの完了後に実行される関数の名前です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:yellow;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>jQuery アニメーションの停止
jQuery stop() メソッド
jQuery stop() メソッドは、アニメーションやエフェクトを完了前に停止するために使用されます。
stop() メソッドは、スライド、フェード、カスタム アニメーションを含むすべての jQuery エフェクト関数で動作します。
文法:
$(selector).stop(stopAll,goToEnd);
オプションの stopAll パラメーターは、アニメーション キューをクリアするかどうかを指定します。デフォルトは false で、アクティブなアニメーションのみを停止し、キューに入れられたアニメーションを逆方向に実行できます。
オプションの goToEnd パラメーターは、現在のアニメーションをすぐに完了するかどうかを指定します。デフォルトは false です。
そのため、デフォルトでは、stop() は選択した要素に指定されている現在のアニメーションをクリアします。
次の例は、パラメータなしの stop() メソッドを示しています。
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
