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

之前写过动画的隐藏与显示: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 参数,否则不能设置该参数。

提示和注释

提示:如果元素已经显示,则该效果不产生任何变化,除非规定了 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 参数,否则不能设置该参数。

提示和注释

提示:如果元素已经隐藏,则该效果不产生任何变化,除非规定了 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() 方法执行完之后,要执行的函数。 
$("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 参数,否则不能设置该参数。

$("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);

 

发布了168 篇原创文章 · 获赞 61 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览