淡入淡出效果

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. 如何用纯 CSS 创作一个跳 8 字型舞的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKNMMm 可交互视频 此视频是可 ...

  2. linux go with vscode

    1 install go apt install golang 将会同时安装下列软件:  golang-1.9 golang-1.9-doc golang-1.9-go golang-1.9-src ...

  3. 20145309java第三次实验报告

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

  4. 《Java程序设计》实验2实验报告

    20145318 <Java程序设计>实验2 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 ...

  5. （java） 第二周学习总结

    在java源代码中,每个变量都必须声明一种类型(type).有两种类型:primitive type和reference type.引用类型引用对象(reference to object),而基本类 ...

  6. jar包中使用log4j2不起作用

    某程序中有使用到log4j2,将该程序打包成jar,使用以下命令执行时,发现log4j不输出 java -cp Tool.jar com.zhen.nameOnce.Log4jTest 且报以下错误 ...

  7. 【cs231n】线性分类笔记

    前言 首先声明,以下内容绝大部分转自知乎智能单元,他们将官方学习笔记进行了很专业的翻译,在此我会直接copy他们翻译的笔记,有些地方会用红字写自己的笔记,本文只是作为自己的学习笔记.本文内容官网链接: ...

  8. 24,25-request对象

    var http = require('http'); var server = http.createServer(); server.listen() console.log(server.add ...

  9. IE与DOM的事件监听

    IE 事件监听 标准DOM不支持   注意几点: window.onload attachEvent detachEvent 标准DOM监听,ie不支持

  10. Memcached get 命令

    Memcached get 命令获取存储在 key(键) 中的 value(数据值) ,如果 key 不存在,则返回空. 语法: get 命令的基本语法格式如下: get key 多个 key 使用空 ...