JQuery显示，隐藏和淡入淡出效果
程序员文章站
2022-03-23 08:51:36
为了把JQuery搞熟悉，看着菜鸟教程，一个一个例子打，边看边记，算是一晚上的一个小总结吧。加油，我很本但是我很勤奋啊。系统的了解它，就要花时间咯。 ......
为了把JQuery搞熟悉，看着菜鸟教程，一个一个例子打，边看边记，算是一晚上的一个小总结吧。加油，我很本但是我很勤奋啊。系统的了解它，就要花时间咯。
<!DOCTYPE html> <html> <head> <title>JQuery常见效果</title> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript"> // $(function(){ // $('p').click(function(){ // $(this).hide(); // }) // }) // 复杂一点的隐藏样式 // $(function(){ // $('.hide').click(function(){ // $(this).parents('.ex').hide('slow'); // }) // }) // 注意.hide(speed,callback) .show(speed,callback) // speed规定显示或隐藏的速度，可以取'slow','fast'或者 // 毫秒。 // slow和fast一定不要忘记引号。 // callback是显示或隐藏完成后所执行的函数名称。 // $(function(){ // $('#hide').click(function(){ // $('p').hide(); // }) // $('#show').click(function(){ // $('p').show(); // }) // }) // $(function(){ // $('#box').click(function(){ // $(this).hide(2000,function(){ // // 让这个盒子在两秒隐藏后显示出来 // $(this).show(2000,function(){ // $(this).css('background-color','yellow'); // }); // }) // }) // }) // toggle(speed,callback),切换元素的可见状态，用法和show // ，hide相同 // $(document).ready(function(){ // $('#box').click(function(){ // $('.p1').toggle(); // }) // }) // 接下来便是淡入淡出效果 // fadeIn(speed,callback);用于淡入已隐藏的元素 // $(function(){ // $('#fadein').click(function(){ // $('#box1').fadeIn(); // $('#box2').fadeIn('slow'); // $('#box3').fadeIn('4000',function(){ // $(this).css('background-color','yellow'); // }); // }) // }) // 相反fadeOut(speed,callback);用于淡出可见元素， // 用法和fadeIn(speed,callback)一致 // $().ready(function(){ // $('#fadein').click(function(){ // $('#box1').fadeOut(6000); // $('#box2').fadeOut(3000); // $('#box3').fadeOut(1000); // }) // }) // 接下来便是fadeToggle(speed,callback),同理切换元素的可见性 // 如果元素已淡入，则fadeToggle()会向元素添加淡出效果 // 如果元素已淡出，则fadeToggle()会向元素添加淡出效果 // $(document).ready(function(){ // $('#fadein').click(function(){ // $('#box1').fadeToggle(1000); // $('#box2').fadeToggle(3000); // $('#box3').fadeToggle(6000); // }) // }) // 接下来便是fadeTo(speed,opacity,callback); // 意思是准许渐变为给定的不透明度(必需要规定效果的时长，不然 //没有效果，方法无效) $(function(){ $('#fadein').click(function(){ $('#box1').fadeTo(2000,0.5); $('#box2').fadeTo(2000,0.7); $('#box3').fadeTo(4000,0.2); }) }) </script> <style type="text/css"> /*.ex{ padding: 10px; background-color: red; border: 1px solid yellow; }*/ </style> </head> <body> <!-- 第一个简单的隐藏效果 --> <!-- <p>第一次点击</p> <p>第二次点击</p> <p>第三次点击</p> --> <!-- <h1>你好</h1> <div class="ex"> <button class="hide">点我隐藏</button> <p>安徽<br> 一个美丽的地方 </p> </div> <h2>Hellow</h2> <div class="ex"> <button class="hide">点我隐藏</button> <p>商贸<br> 8栋611寝室</p> </div> --> <!-- 定义一个段落，加上显示和隐藏的按钮 --> <!-- <p>点击按钮，切换效果</p> <button id="hide">隐藏</button> <button id="show">显示</button> --> <!-- 下面来写一个可以用到hide(speed,callback) --> <!-- <div id="box" style="width: 200px;height: 400px;background-color: red;"> </div> --> <!-- <button id="box">隐藏/显示</button> <p class="p1">这是一大段文本</p> --> <button id="fadein">开关</button> <div id="box1" style="display:block;width: 100px;height: 100px;background-color: red;"></div> <div id="box2" style="display:block;width: 100px;height: 100px;background-color: red;"></div> <div id="box3" style="display:block;width: 100px;height: 100px;background-color: red;"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>淡入淡出</title> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript"> // fadeIn例子 // $(function(){ // $('#button').click(function(){ // $('#box1').fadeIn(1000); // $('#box2').fadeIn(2000); // $('#box3').fadeIn(4000); // }) // }) // fadeOut例子 // $(document).ready(function(){ // $('#button').click(function(){ // $('#box1').fadeOut(1000); // $('#box2').fadeOut(4000); // $('#box3').fadeOut(6000); // }) // }) // fadeToggle用法 // $().ready(function(){ // $('#button').click(function(){ // $('#box1').fadeToggle('slow'); // $('#box2').fadeToggle('fast'); // $('#box3').fadeToggle(); // }) // }) // fadeTo用法 $().ready(function(){ $('#button').click(function(){ $('#box1').fadeTo(4000,0.5); $('#box2').fadeTo(1000,0.5); $('#box3').fadeTo(8000,0.5); }) }) </script> </head> <body> <button id="button">点击我</button> <div id="box1" style="display:none;width: 200px;height: 200px;background-color: red;"></div> <div id="box2" style="display:none;width: 200px;height: 200px;background-color: yellow;"></div> <div id="box3" style="display:none;width: 200px;height: 200px;background-color: blue;"></div> </body> </html>