fadeIn()，fadeOut()，fadeToggle()，fadeTo()

fadeIn()-----淡入已经隐藏的元素（把隐藏的被选元素渐渐显示出来）。
语法：$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长,可以是："slow"、"fast" 或毫秒。
可选的 callback 参数是 该fadeIn()完成后所执行的函数名称。
 
fadeOut()----淡出可见的元素（把可见的被选元素渐渐隐藏起来）。
语法：$(selector).fadeOut(speed,callback);
speed和callback同上。
 
fadeToggle()----可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
语法：$(selector).fadeToggle(speed,callback);
speed和callback同上。
 
fadeTo()-----允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：$(selector).fadeTo(speed,opacity,callback);
speed是必需的，该参数规定效果的时长，可以是："slow"、"fast" 或毫秒。
opacity是必需的，该 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间），越小越透明，0是完全透明（看不见），1是不透明。
callback同上。

<html>

<head>

<script src="./jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

$("button#d").mousedown(function(){

$("button#d").css("color","red");

$("p#a").fadeOut("fast");

$("p#b").fadeOut("slow");

$("p#c").fadeOut(2000);

});

$("button#d").mouseup(function(){

$("button#d").css("color","black");

});

$("button#e").mousedown(function(){

$("button#e").css("color","red");

$("p#a").fadeIn("fast");

$("p#b").fadeIn("slow");

$("p#c").fadeIn(2000);

});

$("button#e").mouseup(function(){

$("button#e").css("color","black");

});

$("button#f").mousedown(function(){

$("button#f").css("color","red");

$("p#a").fadeToggle("fast");

$("p#b").fadeToggle("slow");

$("p#c").fadeToggle(2000);

});

$("button#f").mouseup(function(){

$("button#f").css("color","black");

});

$("button#g").mousedown(function(){

$("button#g").css("color","red");

$("p#a").fadeTo("fast",0.8);

$("p#b").fadeTo("slow",0.5);

$("p#c").fadeTo(2000,0.2);

});

$("button#g").mouseup(function(){

$("button#g").css("color","black");

});

});

</script>

</head>

<body>

<div style="border:1px solid;border-color:red;width:150px;height:216px;">

<div style="border:1px solid;border-color:white;height:70px;">

<p id="a"style="font-size:20px;color:red;">这是第一段</p>

</div>

<div style="border:1px solid;border-color:white;height:70px;">

<p  id="b"style="font-size:20px;color:blue;">这是第二段</p>

</div>

<div style="border:1px solid;border-color:white;height:70px;">

<p  id="c"style="font-size:20px;color:green;">这是第三段</p>

</div>

</div>

<button  id="d">fadeOut</button><br/>

<button  id="e">fadeIn</button><br/>

<button  id="f">fadeToggle</button><br/>

<button  id="g">fadeTo</button><br/>

</body>

</html>

效果：

fadeToggle()，Toggle()，slideToggle()，fadeTo()

       fadeToggle()切换fadeOut()和fadeIn()这两种模式。当被选元素是隐藏的状态时，fadeToggle()触发时会淡入显示被选元素，此时和fadeIn()一样；当被选元素是显示状态时，fadeToggle()触发时会淡出隐藏被选元素，此时和fadeOut()一样。
       Toggle()切换show()和hide()这两种模式。当被选元素是隐藏的状态时，Toggle()触发时会显示被选元素,此时和show()一样；当被选元素是显示状态时，Toggle()触发时会隐藏被选元素，此时和hide()一样。
       slideToggle()切换slideDown()和slideUp()这两种模式。当被选元素是隐藏的状态时，slideToggle()触发时会滑动显示被选元素,此时和slideDown()一样；当被选元素是显示状态时，slideToggle()触发时会滑动隐藏被选元素，此时和slideUp一样。
       fadeTo()要设置被选元素的不透明度（0~1），0的时候是完全透明即隐藏，1的时候是完全不透明即正常的显示状态，在0和1之间的话越大越不透明，越小越透明。
       fadeToggle()、Toggle()和slideToggle()都是用来隐藏或者显示被选元素的，只不过隐藏或显示的效果过程不一样。fadeToggle()是通过淡入/淡出效果来显示/隐藏被选元素，Toggle()是直接隐藏或显示被选元素，slideToggle()是通过滑动效果来隐藏或者显示被选元素。fadeTo()可以通过不透明度来隐藏和显示被选元素。

jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()的更多相关文章

  1. jquery 中fadeIn,fadeOut动画

    我们在做首页banner图片播放的时候会使用fadeIn,fadeOut动画,这里需要注意的是: fadeIn作用相当于:display:list-item;opcity逐渐变为1 fadeOut作用 ...

  2. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  3. CSS 3 过渡效果之jquery 的fadeIn ,fadeOut

    .div { visibility: hidden; opacity: 0; transition: visibility 0s linear 0.5s,opacity 0.5s linear; } ...

  4. Jquery效果代码--（二）

    //jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...

  5. jQuery 效果 - 淡入淡出

    通过 jQuery,您可以实现元素的淡入淡出效果. 点击展示 淡入/淡出 面板 实例 jQuery fadeIn()演示 jQuery fadeIn() 方法. jQuery fadeOut()演示 ...

  6. jQuery 效果 – 淡入淡出

    在在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuer ...

  7. jQuery效果--淡入和淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  8. 松软科技课堂:jQuery 效果 - 淡入淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  9. jquery 效果笔记

    jquery效果 显示隐藏     show()     语法     show([speed,[easing],[fn]])     参数可以省略,无动画直接使用     hide()     to ...

随机推荐

  1. 2018年7月6日go语言学习

    Go是一门并发支持.垃圾回收的编译型系统编程语言. 特点:类型安全和内存安全 以非常直观和极低的方案实现高并发 高效的垃圾回收机制 快速编译 为多核计算机提供性能提升方案 Utf-8编码支持 Go源码 ...

  2. A Boring Problem UVALive - 7676 （二项式定理+前缀和）

    题目链接: I - A Boring Problem UVALive - 7676 题目大意:就是求给定的式子. 学习的网址:https://blog.csdn.net/weixin_37517391 ...

  3. 《Java编程思想第四版完整中文高清版.pdf》-笔记

    D.2.1 安插自己的测试代码 插入下述“显式”计时代码,对程序进行评测: long start = System.currentTimeMillis(); // 要计时的运算代码放在这儿 long ...

  4. DeepLearning.ai学习笔记（五）序列模型 -- week2 自然语言处理与词嵌入

    一.词汇表征 首先回顾一下之前介绍的单词表示方法,即one hot表示法. 如下图示,"Man"这个单词可以用 \(O_{5391}\) 表示,其中O表示One_hot.其他单词同 ...

  5. 如何让vue项目兼容IE浏览器

    一般来说项目开发到后期都需要做各种兼容性处理例如:360.IE9以上.QQ浏览器....等等 那么现在来介绍一个工具 babel-cli 跟 babel-preset-es2015 babel-cli ...

  6. vue之vuex学习

    知识点一:vuex是状态管理器(单向数据流) 每个Vuex应用程序的核心是商店.“商店”基本上是一个容纳您的应用程序状态的容器.有两件事使Vuex商店与普通的全局对象不同: Vuex商店是被动的.当V ...

  7. Angular笔记-select

    --select-- 设置默认选中值方法: <select ng-model="url" ng-options="x.url as x.site for x in ...

  8. Linux Django项目测试

    步骤 django项目: 依赖包 [root@web01 ~]# yum install openssl-devel bzip2-devel expat-devel gdbm-devel readli ...

  9. .Net Core---- 自带Json返回日期带T格式 解决

    前段时间再做core的列表显示中(前台代码是在.net core bootstrap集成框架上的(这是效果浏览地址:http://core.jucheap.com[效果地址来自:http://blog ...

  10. Ubuntu18.04更换国内源（阿里，网易，中科大，清华等源）

    1.备份 备份/etc/apt/sources.list文件 mv /etc/apt/sources.list /etc/apt/sourses.list.backup 2.新建 新建/etc/apt ...