开发者学堂课程【jQuery 开发教程：jQuery 特效_淡入淡出】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4308
jQuery 特效_淡入淡出
一、 淡入淡出
创建一个新的 html 文件，fade
<!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8"> <title></title> <script src="jquery-2.2.1.min.js"s</script> </head> <body> //定义一个div标签 <div id="div1" style="width: 80px;height: 80pX; display:none ;background-color: aquamarine" </div> <div id="div2" style="width: 80px;height: 80px;display:none;background-color: palegreen"</div> <div id="div3 style=width: 80px;height: 80px; display:none;background-color: palevioletred</div> //执行看一下效果
//按钮淡入淡出效果 <button id="in">fade in</button> <button id="out">fade out</button> //js代码 <script> $ (function(){ //链接事件 $("#in").on( "click" ,function()i $ ( "#div1").fadeIn(1000);//执行时间1毫秒 $ (#div2").fadeIn( 1000); $ ( "#div3 ") .fadeIn( 1000); })
$("#out").on("click", function(){ $("#div1")。fade0ut (1000) ; $ ("#div2") . fade0ut (1000) ; $ ("#div1"). fade0ut (1000); }); //淡入淡出都实现
$("#toggle").on("click" ,function(){ $ ( "#div1").fadeToggle(1000); $("#div2").fadeToggle(1000); $ ( #div3").fadeToggle(1000);) });
//调整元素的透明度 $ ("#to").on("click" ,function(); $("#div1").fadeTo( 1000,0.5); $("#div2").fadeTo(1000,0); $ ("#div3 ").fadeTo ( 1000,1) });
}) </script> < /body> </html> //记得添加#
