この記事の内容は、jQueryでどのような特殊効果が実現できるのかを紹介するものです。 jQuery 特殊効果の使用 (コード例)。困っている友人は参考にしていただければ幸いです。 [推奨される関連ビデオ チュートリアル: jQuery チュートリアル ]
1. jQuery エフェクト -- 表示と非表示
HTML 要素の表示と非表示を切り替えるには、hide() メソッドと show() メソッドを使用します。
例:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btnHide").click(function(){ $("#myDiv1").hide(); //语法格式:$(selector).hide(speed,callback); //可选参数1:speed 参数规定隐藏/显示的速度,可以取值:"slow"、"fast" 或毫秒。 //可选参数2:callback 参数是隐藏或显示完成后所执行的函数名称。 // callback的使用如下,即第2个参数是一个函数,jQuery效果执行完会执行该函数。 // $("#myDiv1").hide(3000,function(){ // alert("myDiv1隐藏了"); // }); }); $("#btnShow").click(function(){ $("#myDiv1").show(); //语法格式:$(selector).show(speed,callback); //可选参数1:speed 参数规定隐藏/显示的速度,可以取值:"slow"、"fast" 或毫秒。 //可选参数2:callback 参数是隐藏或显示完成后所执行的函数名称。 }); }); </script> </head> <body> <button type="button" id="btnHide">隐藏</button> <button type="button" id="btnShow">显示</button> <div id="myDiv1" style="width:100px;height:50px;background-color:green"></div> </body> </html>
2. jQuery エフェクト - フェードインとフェードアウト
# (1) fadeIn() メソッドは、非表示の要素をフェードインするために使用されます。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btnfadeIn").click(function(){ $("#myDiv1").fadeIn(); //语法格式:$(selector).fadeIn(speed,callback); //可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。 //可选参数2:callback 参数是该效果完成后所执行的函数名称。 }); $("#btnfadeOut").click(function(){ $("#myDiv1").fadeOut(); //语法格式:$(selector).fadeOut(speed,callback); //可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。 //可选参数2:callback 参数是该效果完成后所执行的函数名称。 }); $("#btnfadeToggle").click(function(){ $("#myDiv1").fadeToggle(); //语法格式:$(selector).fadeToggle(speed,callback); //可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。 //可选参数2:callback 参数是该效果完成后所执行的函数名称。 }); $("#btnfadeTo").click(function(){ $("#myDiv1").fadeTo("slow",0.35); //语法格式:$(selector).fadeTo(speed,opacity,callback); //第一个参数是必须的:传入的值可以是"slow"、"fast" 、毫秒; //第二个参数是必须的:传入值是透明度,取值在0-1之间 //第三个参数是可选的:callback 参数是该效果完成后所执行的函数名称。 }); }); </script> </head> <body> <button type="button" id="btnfadeIn">fadeIn</button> <button type="button" id="btnfadeOut">fadeOut</button> <button type="button" id="btnfadeToggle">fadeToggle</button> <button type="button" id="btnfadeTo">fadeTo</button> <div id="myDiv1" style="width:200px;height:100px;background-color:green"></div> </body> </html>
3. jQueryエフェクト-sliding
(1) slideDown()メソッドを使用して移動します。下向きのスライド要素。 (2) slideUp()メソッドを使用して要素を上にスライドさせます。 (3) slideToggle()メソッドは、slideDown()メソッドとslideUp()メソッドを切り替えることができます。要素がすでに下にスライドしている場合は、上にスライドさせます。要素がすでに上にスライドしている場合は、下にスライドします。 例:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btnslideDown").click(function(){ $("#myDiv1").slideDown(); //语法格式:$(selector).slideDown(speed,callback); //可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。 //可选参数2:callback 参数是滑动完成后所执行的函数名称。 }); $("#btnslideUp").click(function(){ $("#myDiv1").slideUp(); //语法格式:$(selector).slideUp(speed,callback);; //可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。 //可选参数2:callback 参数是滑动完成后所执行的函数名称。 }); $("#btnslideToggle").click(function(){ $("#myDiv1").slideToggle(); //语法格式:$(selector).slideToggle(speed,callback);; //可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。 //可选参数2:callback 参数是滑动完成后所执行的函数名称。 }); }); </script> </head> <body> <button type="button" id="btnslideDown">slideDown</button> <button type="button" id="btnslideUp">slideUp</button> <button type="button" id="btnslideToggle">slideToggle</button> <div id="myDiv1" style="width:200px;height:100px;background-color:green"></div> </body> </html>
4. jQuery エフェクト - アニメーション
animate() メソッドは、カスタム アニメーションを作成するために使用されます。 例:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btn_animate").click(function(){ $("#myDiv1").animate({left:'250px'}); //语法格式:$(selector).animate({params},speed,callback); //第一个参数是必须的:值是定义形成动画的 CSS 属性 //第二个参数是可选的:传入的值是"slow"、"fast" 、毫秒 //第三个参数是可选的:callback 参数是该效果完成后所执行的函数名称 //第一个参数的css属性也可以使用相对值,像下面这样 //$("#myDiv1").animate({left:'250px',height:'+=10px',width:'+=10px'}); }); }); </script> </head> <body> <button type="button" id="btn_animate">animate</button> <div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div> </body> </html>
5. jQuery -- アニメーションの停止
stop() メソッドは、アニメーションやエフェクトを完了前に停止するために使用されます。 。 stop() メソッドは、スライド、フェード、カスタム アニメーションなど、すべての jQuery エフェクト関数に適用されます。 例:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btn_animate").click(function(){ $("#myDiv1").animate({left:'250px'},5000); }); $("#btn_stop").click(function(){ $("#myDiv1").stop(); //语法格式:$(selector).stop(stopAll,goToEnd); //可选参数1:规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。 //可选参数2:规定是否立即完成当前动画。默认是 false。 }); }); </script> </head> <body> <button type="button" id="btn_animate">animate</button> <button type="button" id="btn_stop">Stop</button> <div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div> </body> </html>
6、jQuery -- チェーン プログラミング
チェーン プログラミング :同じ要素に対して複数の jQuery コマンドを順番に実行します。こうすることで、ブラウザーは同じ要素を何度も検索する必要がなくなります。 アクションをリンクするには、そのアクションを前のアクションに追加するだけです。
例:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btnLink").click(function(){ $("#myDiv1").css("background-color","yellow").slideUp(2000).slideDown(2000); }); }); </script> </head> <body> <button type="button" id="btnLink">链式编程</button> <div id="myDiv1" style="width:100px;height:50px;background-color:green"></div> </body> </html>
js 特殊効果コレクション にアクセスすることをお勧めします。
以上がjQuery ではどのような特殊効果を実現できますか? jQuery特殊効果の使用(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。