淡入淡出效果

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. 对于近阶段公司代码 review 小结

    来新公司,给公司的SDK review了一下.发现了不少小问题,在此总结一下. (我下面说明问题可能是很简单,但是搞清楚某些问题还是花了些时间的,大家引以为戒吧) 先谈谈处理的问题: 1.某天QA说有 ...

  2. JS等比例缩放图片,限定最大宽度和最大高度

    JS等比例缩放图片,限定最大宽度和最大高度 JavaScript //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ ...

  3. mysql-connector-java小笔记

    Java 连接MySQL需要驱动包,否则JDBC无法访问数据库(无法注册驱动),常用的是mysql-connector-java,在idea中新建项目时可以在选择依赖时勾选Mysql,这样就会自动加载 ...

  4. 使用BusyBox制作根文件系统

    1.BusyBox简介 BusyBox 是很多标准 Linux 工具的一个单个可执行实现.BusyBox 包含了一些简单的工具,例如 cat 和 echo,还包含了一些更大.更复杂的工具,例如 gre ...

  5. mongodb query index 分析

    query 的过程及分析: query 是通过Query planner选择最有效的查询plan ,为一个query 被给予一个可用的索引,查询时 query optimizer(最优的查询条件选择器 ...

  6. jquery map方法

    jQuery.map( array, callback(elementOfArray, indexInArray) )Returns: Array 感觉jquery的map方法非常好用,特向大家分享下 ...

  7. 在centos7上安装部署hadoop2.7.3和spark2.0.0

    一.安装装备 下载安装包: vmware workstations pro 12 三台centos7.1 mini 虚拟机 网络配置NAT网络如下: 二.创建hadoop用户和hadoop用户组 1. ...

  8. Android 进行解析并显示服务端返回的数据

    例子说明:用户通过访问web资源的最新电影资讯,服务器端生成XML或JSON格式数据,返回Android客户端进行显示. 此案例开发需要两个方面 WEB开发和Android开发. 一.web开发相对比 ...

  9. php-fpm: 某项目网站频繁出现503问题解决( WARNING: [pool www] server reached pm.max_children setting (50), consider raising it)

    服务是nginx+php-fpm配置, 在运行过一段时间后,会经常出现: WARNING: [pool www] server reached pm.max_children setting (50) ...

  10. 超好用的ip归属区域查询

    源码如下: #!/usr/bin/env python#-*-coding:utf-8-*- import requestsfrom bs4 import BeautifulSoupimport re ...