淡入淡出效果

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. Python面试题之Python中type和object的关系

    知乎上看到的提问: 两个是互为实例的关系,但不是互为子类的关系,只有type是object的子类,反之则不成立. 大牛说两者是蛋生鸡鸡生蛋的关系,但我还是不明白,有懂的麻烦解释一下, 希望不要给出外文 ...

  2. java switch笔记

    1. 在Java7之前,switch只能支持byte.short.char.int或者其对应的封装类以及Enum类型 2. Java7后,开始支持String 3. switch语句中,表达式的值不能 ...

  3. 201453131《Java程序设计》实验三实验报告

    实验三 敏捷开发与XP实践 实验内容 •下载并学会使用git上传代码: •与同学结对,相互下载并更改对方代码,并上传: 实验步骤 下载并用git上传代码: •1.下载并安装好git,在cmd中输入gi ...

  4. [洛谷P4918]信仰收集

    题目背景 随着各种势力的迁入,守矢神社丧失了不少信仰现在,为了挽回香火日益惨淡的神社,八坂神奈子派遣神社的风祝早苗去人类村落收集信仰 题目描述 你可以将村落看成一个m个点的有向无环图(编号从1−m), ...

  5. Linux crontab命令 定时任务 用法详解以及no crontab for root解决办法

    最近系统服务器进行搬迁,又恰好需要使用定时任务运行程序,而我的程序主要使用PHP写的,然后总结了下定时任务的用法,但是在这里主要写的是关于crontab命令的用法,使用过程中遇到不少问题,例如no c ...

  6. 在Windows下使用Navicat连接Linux下的MySql

    Linux下的Mysql安装可以参考菜鸟教程:https://www.runoob.com/mysql/mysql-install.html 安装完成后你会发现用Navicat链接MySql会失败,这 ...

  7. svn的分支

    svn的分支使用 新建一个项目的时候,选择建立自带trunk,branches和tags文件夹的. 其中trunk作为主开发. 有需要的时候,从trunk创建分支到对应的branches下面,新建分支 ...

  8. codeforces 848c - two TVs

    2017-08-22 15:42:44 writer:pprp 参考:http://blog.csdn.net/qq_37497322/article/details/77463376#comment ...

  9. 「SSH 黑魔法」： 代理、端口转发和 shell 共享

    在好朋友的推荐下,我看了这个视频: The Black Magic Of SSH 这个视频里面,介绍了  ssh 的一些高级应用:结合工作的经历,两类问题会对我们平时的工作帮助很大: 1. 两个人怎么 ...

  10. hdu 5696 区间的价值 单调栈+rmq

    区间的价值 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem D ...