jquery はスライディング効果を実装します code

jquery はスライディング効果を実装します code_jquery

WBOY

リリース： 2016-05-16 15:46:07

オリジナル

1230 人が閲覧しました

このプロジェクトでは、スライド効果を実現するために jquery を使用する必要があるため、関連するコンテンツは次のように構成されており、テキストの説明とコード分析が含まれています。学ぶ。

実装方法 1:

.slideUp([duration][,complete])—ターゲット要素は上にスライドして非表示になります。 .slideDown([duration][,complete])—ターゲット要素が下にスライドして表示されます。 .slideToggle([duration][,complete])—ターゲット要素が非表示の場合は下にスライドして表示し、それ以外の場合は上にスライドして非表示にします。
注: 期間はメソッド実行の時間間隔であり、完了はコールバック関数です。

slide.js コード:

<!DOCTYPE html> 
<html lang="zh_CN"> 
<head> 
 <meta charset="UTF-8"> 
 <title>滑动效果</title> 
 <script src="js/jquery-2.1.3.min.js"></script> 
 <script src="js/slide.js"></script> 
 <style> 
  img{ 
   width:500px; 
  } 
 </style> 
</head> 
<body> 
<div> 
 <div> 
  <button id="btn1">向上划入隐藏</button> 
  <button id="btn2">向下滑出显示</button> 
  <button id="btn3">向上划入隐藏/向下滑出显示</button> 
 </div> 
 <img src="images/2.jpg"/> 
</div> 
</body> 
</html>

ログイン後にコピー

/*滑动效果*/ 
$(document).ready(function(){ 
 //向上滑入 
 $('#btn1').click(function(){ 
  $('img').slideUp(2000); 
 }); 
 //向下滑出 
 $('#btn2').click(function(){ 
  $('img').slideDown(2000); 
 }); 
 //切换滑动 
 $('#btn3').click(function(){ 
  $('img').slideToggle(2000); 
 }); 
})

ログイン後にコピー

実装方法 2:

1. jQuery___ エフェクト (スライディングエフェクト)

slideDown(速度, [コールバック])

概要 一致するすべての要素の高さを変更 (下方向に増加) することで動的に表示し、オプションで表示完了後にコールバック関数をトリガーします。 このアニメーション効果は要素の高さのみを調整し、一致する要素を「スライド」方式で表示できるようにします。 jQuery 1.3 では、上下のパディングとマージンもアニメーション化され、効果がよりスムーズになります。

パラメータ

speedString,Number

あらかじめ決められた 3 つの速度 (「遅い」、「標準」、「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (1000 など) コールバック (オプション)FunctionFunction

アニメーション完了時に実行される関数

例

説明:

600 ミリ秒かけて段落をゆっくりと下にスライドさせます

jQuery コード:

説明:

$("p").slideDown("slow");

ログイン後にコピー

200 ミリ秒かけて段落を素早く下にスライドすると、ダイアログボックスがポップアップします

jQuery コード:

slideUp(速度, [コールバック])

$("p").slideDown("fast",function(){ 
 alert("Animation Done."); 
});

ログイン後にコピー

概要

高さを変更 (上向きに減少) することで、一致するすべての要素を動的に非表示にし、オプションで非表示の完了後にコールバック関数をトリガーします。

このアニメーション効果は要素の高さを調整するだけで、一致する要素を「スライド」方式で非表示にすることができます。 jQuery 1.3 では、上下のパディングとマージンもアニメーション化され、効果がよりスムーズになります。

パラメータ

speedString,Number

あらかじめ決められた 3 つの速度 (「遅い」、「標準」、「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (1000 など)

コールバック (オプション)関数

アニメーション完了時に実行される関数

例

説明:

600 ミリ秒かけて段落をゆっくりと上にスライドさせます

jQuery コード:

説明:

$("p").slideUp("slow");

ログイン後にコピー

200 ミリ秒かけて段落を素早く上にスライドすると、ダイアログボックスがポップアップします

jQuery コード:

slideToggle(speed, [callback])

$("p").slideUp("fast",function(){ 
 alert("Animation Done."); 
});

ログイン後にコピー

概要

高さの変更によって、一致するすべての要素の表示を切り替えます。切り替えが完了すると、オプションでコールバック関数をトリガーします。

このアニメーション効果は要素の高さを調整するだけで、一致する要素を「スライド」方式で非表示にしたり表示したりできます。 jQuery 1.3 では、上下のパディングとマージンもアニメーション化され、効果がよりスムーズになります。

パラメータ

speedString,Number

コールバック (オプション)関数

アニメーション完了時に実行される関数

例

説明:

段落を 600 ミリ秒間ゆっくりと上下にスライドさせます

jQuery コード:

説明:

$("p").slideToggle("slow");

ログイン後にコピー

200 ミリ秒かけて段落を上下にすばやくスライドすると、ダイアログボックスがポップアップします

jQuery コード:

上記の内容は、スライド効果を実装するための jquery コードです。気に入っていただければ幸いです。

$("p").slideToggle("fast",function(){ 
 alert("Animation Done."); 
});

ログイン後にコピー