Mr.J-- jQuery学习笔记(十七)--动画淡入淡出&&弹窗广告

最新推荐文章于 2020-11-12 17:45:03 发布

原创最新推荐文章于 2020-11-12 17:45:03 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

jQuery学习专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了jQuery中FadeIn(), FadeOut(), FadeToggle()和FadeTo()四种动画方法，用于实现元素的淡入淡出效果。同时，结合实际案例探讨了如何运用这些方法创建弹窗广告，强调了在不同状态下的效果和注意事项，并提供了一个简单的JS演示。" 136050327,7337247,构建可伸缩的数据架构：DHT与一致性哈希,"['架构设计', '大数据', '分布式系统', 'Python', 'Java']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写过动画的隐藏与显示：Mr.J-- jQuery学习笔记(十四)--动画显示隐藏

动画隐藏与显示的一个小demo--对联广告：Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告

展开和收起动画&&折叠菜单的实现:Mr.J-- jQuery学习笔记(十六)--展开和收起动画&&折叠菜单的实现

动画的淡入淡出

下面实例要用的页面元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            background: red;
            display: none;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>淡入到</button>
<div></div>
</body>
</html>

FadeIn()

定义和用法

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

语法

$(selector).fadeIn(speed,callback)

参数	描述
speed	可选。规定元素从隐藏到可见的速度。默认为 "normal"。可能的值：毫秒（比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。
callback	可选。fadeIn 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。除非设置了 speed 参数，否则不能设置该参数。

参数

描述

speed

可选。规定元素从隐藏到可见的速度。默认为 "normal"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。

callback

可选。fadeIn 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经显示，则该效果不产生任何变化，除非规定了 callback 函数。

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

$("button").eq(0).click(function () {
	$("div").fadeIn(1000, function () {
		alert("淡入完毕");
	});
});

FadeOut()

定义和用法

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

语法

$(selector).fadeOut(speed,callback)

参数	描述
speed	可选。规定元素从可见到隐藏的速度。默认为 "normal"。可能的值：毫秒（比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）。
callback	可选。fadeOut 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。除非设置了 speed 参数，否则不能设置该参数。

参数

描述

speed

可选。规定元素从可见到隐藏的速度。默认为 "normal"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）。

callback

可选。fadeOut 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

$("button").eq(1).click(function () {
	$("div").fadeOut(1000, function () {
		alert("淡出完毕");
	});
});

FadeToggle()

定义和用法

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

注释：隐藏的元素不会被完全显示（不再影响页面的布局）。

语法

$(selector).fadeToggle(speed,easing,callback)

参数	描述
speed	可选。规定褪色效果的速度。可能的值：毫秒 "slow" "fast"
easing	可选。规定在动画的不同点上元素的速度。默认值为 "swing"。可能的值： "swing" - 在开头/结尾移动慢，在中间移动快 "linear" - 匀速移动提示：扩展插件中提供更多可用的 easing 函数。
callback	可选。fadeToggle() 方法执行完之后，要执行的函数。

参数

描述

speed

可选。规定褪色效果的速度。

可能的值：

毫秒
"slow"
"fast"

easing

可选。规定在动画的不同点上元素的速度。默认值为 "swing"。

可能的值：

"swing" - 在开头/结尾移动慢，在中间移动快
"linear" - 匀速移动

提示：扩展插件中提供更多可用的 easing 函数。

callback

可选。fadeToggle() 方法执行完之后，要执行的函数。

$("button").eq(2).click(function () {
	$("div").fadeToggle(1000, function () {
		alert("切换完毕");
	});
});

FadeTo()

定义和用法

fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

语法

$(selector).fadeTo(speed,opacity,callback)

参数	描述
speed	可选。规定元素从当前透明度到指定透明度的速度。可能的值：毫秒（比如 1500） "slow" "normal" "fast"
opacity	必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback	可选。fadeTo 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。除非设置了 speed 参数，否则不能设置该参数。

参数

描述

speed

可选。规定元素从当前透明度到指定透明度的速度。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

opacity

必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。

callback

可选。fadeTo 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

$("button").eq(3).click(function () {
	$("div").fadeTo(1000, 0.2, function () {
		alert("淡入完毕");
	})
});

弹窗广告的实现

用的的方法就是前面所写到的四种方法

页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .ad{
            position: fixed;
            right: 0;
            bottom: 0;
            display: none;
        }
        .ad>span{
            display: inline-block;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="ad">
    <img src="images/ad-pic.png" alt="">
    <span></span>
</div>
</body>
</html>

JS--demo

$(function () {
	// 1.监听span的点击事件
	$("span").click(function () {
		$(".ad").remove();
	});

	// 2.执行广告动画
	
	$(".ad").slideDown(1000, function () {
		$(".ad").fadeOut(1000, function () {
			$(".ad").fadeIn(1000);
		});
	});

});

效果：

这个图片会进行淡入淡出效果，如果真的想写弹窗广告的话，使用图片肯定是不行的，就的自己写脚本实现了。

上面的一段代码，亦可以使用JavaScript经典写法：

$(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);