jQueryの効果LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

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() メソッドを示しています。次のセクション

<!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', height:'+=150px', width:'+=150px' }); }); }); </script> </head> <body> <button>开始动画</button> <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>
提出するリセットコード
章コースウェア