淡入淡出效果

jQuery 提供了下面几种方法可以实现显示的淡入淡出效果：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

fadeIn()方法

fadeIn()实现淡入效果，其基本语法如下：

$(selector).fadeIn(speed,callback);

可选参数 speed 给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒） 第二个可选参数为回调函数，在 fadeIn()方法结束后调用。

$("button").click(function(){

  $("#div1").fadeIn();

  $("#div2").fadeIn("slow");

  $("#div3").fadeIn(3000);

});

fadeOut()方法

fadeOut()实现淡出效果，其基本语法如下：

$(selector).fadeOut(speed,callback);

可选参数 speed 给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒） 第二个可选参数为回调函数，在 fadeOut()方法结束后调用。

$("button").click(function(){

  $("#div1").fadeOut();

  $("#div2").fadeOut("slow");

  $("#div3").fadeOut(3000);

});

fadeToggle()方法

fadeToggle()交替进行 fadeIn()和 fadeOut()，如果元素是淡出的，那么 fadeToggle()将淡入该元素，如果之前是淡入的，fadeToggle 将淡出该元素。

其基本语法如下：

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

可选参数 speed 给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒） 第二个可选参数为回调函数，在 fadeToggle()方法结束后调用。

下面例子，点击按钮之后，可以交替淡出淡入三个矩形。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JQuery Demo</title>

    <script src="scripts/jquery-1.9.1.js"></script>

    <script>

        $(document).ready(function () {

            $("button").click(function () {

                $("#div1").fadeToggle();

                $("#div2").fadeToggle("slow");

                $("#div3").fadeToggle(3000);

            });

        });

    </script>

</head>

<body>

    <p>Demonstrate fadeToggle() with different speed parameters.</p>

    <button>Click to fade in/out boxes</button>

    <br>

    <br>

    <div id="div1" style="width: 80px; height: 80px;

        background-color: red;"></div>

    <br>

    <div id="div2" style="width: 80px; height: 80px;

        background-color: green;"></div>

    <br>

    <div id="div3" style="width: 80px; height: 80px;

     background-color: blue;"></div>

</body>

</html>

fadeTo()方法

fadeTo()实现淡化到指定的透明度，其基本语法如下

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

必需参数 speed 给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒） 第二个必须参数为透明度，值域为0到1之间。

可选参数为回调函数，在 fadeIn()方法结束后调用。

$("button").click(function(){

  $("#div1").fadeTo("slow",0.15);

  $("#div2").fadeTo("slow",0.4);

  $("#div3").fadeTo("slow",0.7);

});

Javascript-- jQuery动画篇(淡入淡出效果)的更多相关文章

  1. jQuery-4.动画篇---淡入淡出效果

    jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...

  2. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  3. JQuery动画之淡入淡出动画

    1. 淡入动画 1.1 不带参数的淡入动画 格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...

  4. Android动画之淡入淡出

    为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见. 我们把当前要显示的View叫 ...

  5. 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  6. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  7. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  8. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

  9. JQuery显示，隐藏和淡入淡出效果

    为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...

随机推荐

  1. iOS知识点整理

    1.宏定义 #define  #   ## a. 后面一个#是转成字符串 b. 后面## 是连接的作用 2. __attribute__ 常用的 __attribute__(( constructor ...

  2. 终极之shell-zsh全解析

    什么是Zsh Zsh是一款强大的虚拟终端,既是一个系统的虚拟终端,也可以作为一个脚本语言的交互解析器. Zsh的一些特性 兼容bash,原来使用bash的兄弟切换过来毫无压力. 强大的历史纪录功能,在 ...

  3. Scrapy 分布式数据采集方案

    运行环境 CentOS7. + Python2. + Scrapy1. + MongoDB3. + BeautifulSoup4. 编程工具 PyCharm + Robomongo + Xshell ...

  4. 推荐个非常简单好用的AOP -- MrAdvice

    https://github.com/ArxOne/MrAdvice 太简单了,写好自己的处理类, 作为Attribute加到要拦截的方法或者类上就可以了. Here is the minimal s ...

  5. [BZOJ1996] chorus合唱队

    Description Input Output Sample Input 4 1701 1702 1703 1704 Sample Output 8 HINT 区间$dp$,首先每个点被放入队伍时队 ...

  6. MySQL表损坏修复【Incorrect key file for table】

    今天机房mysql服务器异常关机,重新启动后报错如下: -- :: [ERROR] /usr/local/mysql/bin/mysqld: Incorrect key file for table ...

  7. cp 复制 mv剪切

    cp cp -p test.rb /home/test    将test.rb copy到test目录,并且保留原文件的属性cp -r Dir/ /home/test    将Dir目录copy到te ...

  8. HDU5299 圆的扫描线 && 树上删边博弈

    HDU5299 圆的扫描线 && 树上删边博弈 标签(空格分隔): 未分类 给出若干个圆,可以互相嵌套但不相交或相切. 每次删去一个圆和它内部的圆,进行博弈,问谁赢. 分成两部分.首先 ...

  9. bugfree登录后报错PHP Fatal error: Call-time pass-by-reference has been removed in

    详细报错信息[Tue Apr 25 06:49:07.556316 2017] [:error] [pid 21799] [client *.*.*.*:55813] PHP Fatal error: ...

  10. UVa 11324 最大团（强连通分量缩点）

    https://vjudge.net/problem/UVA-11324 题意:给一张有向图G,求一个结点数最大的结点集,使得该结点集中任意两个结点u和v满足,要么u可以到达v,要么v可以达到u. 思 ...