jQuery 特效_淡入淡出|学习笔记

简介: 快速学习 jQuery 特效_淡入淡出

开发者学堂课程【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>
//执行看一下效果

图片67.png

//按钮淡入淡出效果
<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);
})

图片68.png

$("#out").on("click", function(){
$("#div1")。fade0ut (1000) ;
$ ("#div2") . fade0ut (1000) ;
$ ("#div1"). fade0ut (1000);
});
//淡入淡出都实现

图片69.png

$("#toggle").on("click" ,function(){
$ ( "#div1").fadeToggle(1000);
$("#div2").fadeToggle(1000);
$ ( #div3").fadeToggle(1000);)
});

图片70.png

//调整元素的透明度
$ ("#to").on("click" ,function();
$("#div1").fadeTo( 1000,0.5);
$("#div2").fadeTo(1000,0);
$ ("#div3 ").fadeTo ( 1000,1)
});

图片71.png

})
</script>
< /body>
</html>
//记得添加#
相关文章
|
JavaScript
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
61 0
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
|
20天前
|
JavaScript
jQuery 效果 - 淡入淡出
jQuery 效果 - 淡入淡出
33 6
|
2月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
50 13
|
3月前
|
JavaScript
jQuery 效果 - 淡入淡出
jQuery 效果 - 淡入淡出
14 0
|
4月前
|
JavaScript
jQuery实现淡入淡出
jQuery实现淡入淡出
|
5月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
36 0
|
5月前
|
JavaScript 前端开发 Windows
jQuery权威指南学习笔记
jQuery权威指南学习笔记
|
5月前
|
JavaScript 前端开发
jQuery 第四章(效果,显示隐藏,淡入淡出)
jQuery 第四章(效果,显示隐藏,淡入淡出)
63 0
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录