主要内容:
1、显示与隐藏效果
2、滑动效果
3、淡入与淡出效果
4、动画效果
5、弹出广告效果
一、显示与隐藏
显示与隐藏即 show() 和 hide() ,能够控制元素显示或隐藏。
实例:
<script type="text/javascript"> var isShow = true; $('#btn').click(function () { if(isShow){ $('.box').show(3000,function () { $('.box').text('盒子现身了'); isShow = false; $('#btn').text('隐藏'); }) } else{ $('.box').hide(2000,function () { $('.box').text(''); isShow = true; $('#btn').text('显示'); }) } }) </script>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的效果</title> <style type="text/css"> .box{ width: 300px; height:200px; border:2px solid gold; display: none; } </style> </head> <body> <div class="box"> </div> <button id="btn">显示</button> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> // $('#btn').click(function () { // $('.box').css('display','block'); // }); // jQuery提供了一些方法,如show(),hide() 控制元素显示或隐藏 var isShow = true; $('#btn').click(function () { if(isShow){ $('.box').show(3000,function () { $('.box').text('盒子现身了'); isShow = false; $('#btn').text('隐藏'); }) } else{ $('.box').hide(2000,function () { $('.box').text(''); isShow = true; $('#btn').text('显示'); }) } }) </script> </html>
二、滑动效果
有两种实现方式,即 slideDown()/slideUp() 和 slideToggle().
第一种方式:使用 slideDown() 和 slideUp().
实例:
<script type="text/javascript"> $(document).ready(function () { $('#btn').hover(function () { $('#box').slideDown(2000,function () { $(this).text('大吉大利,今晚吃鸡...'); }); },function () { $('#box').slideUp(4000,function () { $(this).text(''); }); }) }) </script>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slide滑动效果</title> <style type="text/css"> #box{ width:300px; height:300px; border:2px solid greenyellow; display: none; } </style> </head> <body> <div id="box"></div> <button id="btn">显示</button> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btn').hover(function () { $('#box').slideDown(2000,function () { $(this).text('大吉大利,今晚吃鸡...'); }); },function () { $('#box').slideUp(4000,function () { $(this).text(''); }); }) }) </script> </html>
第二种方式:使用 slideToggle() 。
实例:
<script type="text/javascript"> $(document).ready(function () { isShow = true; $('#btn').click(function () { $('#box').slideToggle(3000,function () { if(isShow){ $('#btn').text('隐藏'); isShow = false; } else{ $('#btn').text('显示'); isShow = true; } }); }) }) </script> </html>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slide滑动效果</title> <style type="text/css"> #box{ width:300px; height:300px; border:2px solid greenyellow; display: none; } </style> </head> <body> <div id="box"></div> <button id="btn">显示</button> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function () { isShow = true; $('#btn').click(function () { $('#box').slideToggle(3000,function () { if(isShow){ $('#btn').text('隐藏'); isShow = false; } else{ $('#btn').text('显示'); isShow = true; } }); }) }) </script>
三、淡入和淡出效果
1、几对效果,fadeIn / fadeOut,fadeTo,fadeToggle。
$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeOut() 方法用于淡出可见元素。$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
$(selector).fadeToggle(speed,callback);
fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
2、fadeIn / fadeOut 实例(fadeTo表示最终效果,配合淡入淡出使用):
<script type="text/javascript"> $(document).ready(function () { // 当鼠标从元素上移开时,改变元素的显示状态 $('#btn').mouseout(function(){ $('#box').fadeIn(3000); // fadeIn() 用于淡入已隐藏的元素。 //$('#box').fadeIn('slow'); $('#box').fadeOut(1000); // 淡出 $('#box').fadeTo(2000,0.3); // 最终状态 }); }) </script>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fade淡入淡出</title> <style type="text/css"> #box{ width:300px; height:300px; border:2px solid #b3d7ff; display:none; } </style> </head> <body> <div id="box"> </div> <button id="btn">显示</button> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function () { // 当鼠标从元素上移开时,改变元素的显示状态 $('#btn').mouseout(function(){ $('#box').fadeIn(3000); // fadeIn() 用于淡入已隐藏的元素。 // $('#box').fadeIn('slow'); $('#box').fadeOut(1000); // 淡出 $('#box').fadeTo(2000,0.3); // 最终状态 }); }) </script> </html>
3、fadeToggle实例
<script type="text/javascript"> $(document).ready(function () { $('#btn').click(function(){ $('#box').toggle(3000); $("#box").text("我会变身!"); $("#box").fadeTo(2000,0.3); }) }) </script>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fade淡入淡出</title> <style type="text/css"> #box{ width:300px; height:300px; border:2px solid #b3d7ff; display:none; } </style> </head> <body> <div id="box"> </div> <button id="btn">显示</button> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btn').click(function(){ $('#box').toggle(3000); $("#box").text("我会变身!"); $("#box").fadeTo(2000,0.3); }) }) </script> </html>
四、动画效果
关于动画效果,这里给大家介绍两种玩法。
玩法一:无延迟动画,即打开网页或点击接触选项等情况下,立即出现对应动画。
实例:
script type="text/javascript"> $(document).ready(function () { $('#start').click(function () { $('#box').animate({ width:'300px', height:'300px', },10000) }); $('#stop').click(function () { $('#box').stop() }) }) </script>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate动画</title> <style type="text/css"> #box{ width:100px; height:100px; border:2px solid mediumspringgreen; position: absolute; font-size:14px; text-align: center; line-height: 100px; } </style> </head> <body> <button id="start">动画</button> <button id="stop">停止</button> <div id="box"> hello,everyone! </div> </body> <script src="../jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#start').click(function () { $('#box').animate({ width:'300px', height:'300px', },10000) }); $('#stop').click(function () { $('#box').stop() }) }) </script> </html>
玩法二:延迟播放动画,即 delay()。
实例:
<script type="text/javascript"> $(document).ready(function () { $('#box').animate({ left:'200px', top:'300px' }).delay(2000).animate({top:'400px'}); // delay()是指的延迟 }) </script>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate动画</title> <style type="text/css"> #box{ width:100px; height:100px; border:2px solid mediumspringgreen; position: absolute; font-size:14px; text-align: center; line-height: 100px; } </style> </head> <body> <button id="start">动画</button> <button id="stop">停止</button> <div id="box"> hello,everyone! </div> </body> <script src="../jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#box').animate({ left:'200px', top:'300px' }).delay(2000).animate({top:'400px'}); // delay()是指的延迟 }) </script> </html>
五、弹出广告效果
综合运用前几个方法,就可以得到弹出的广告效果。
实例:
<script type="text/javascript"> $(document).ready(function () { $('#box').slideDown('normal').slideUp('fast').fadeIn(2000).click(function () { $(this).fadeOut(1000); }) }) </script>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出广告</title> <style type="text/css"> #box{ width:200px; height:200px; position:absolute; right:10px; bottom:0; display:none; } </style> </head> <body> <div id="box"> <img src="../../lufei.jpg" style="width:80%; height:50%;"/> </div> </body> <script src="../jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#box').slideDown('normal').slideUp('fast').fadeIn(2000).click(function () { $(this).fadeOut(1000); }) }) </script> </html>