松软科技课堂:jQuery 效果 - 淡入淡出
jQuery Fading 方法
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法:
实例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法:
实例
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法:
实例
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法:
实例
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
---------------------------------------------------------------------------------------------------------------------------------
文章来源:www.sysoft.net.cn,加v:15844800162深度交流
松软科技课堂:jQuery 效果 - 淡入淡出的更多相关文章
- 松软科技课堂:jQuery 效果 - 滑动
jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery sli ...
- JQuery效果-淡入淡出、滑动、动画
一.JQuery Fading方法 JQuery 有四种fade方法 1.fadeIn() 淡入 对应也有$(selector).fadeIn(speed, ...
- jQuery 效果 - 淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果. 点击展示 淡入/淡出 面板 实例 jQuery fadeIn()演示 jQuery fadeIn() 方法. jQuery fadeOut()演示 ...
- jQuery 效果 – 淡入淡出
在在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuer ...
- jQuery效果-淡入淡出
本文实现一个控制出现.消失.透明度的效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- 松软科技课堂:jQuery 事件函数
jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法.术语由事件“触发”(或“激发”)经常会被使用. 通常会 ...
- 松软科技课堂:jQuery 语法
jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(select ...
- 利用jQuery的淡入淡出实现轮播器
基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教 HTML: & ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
随机推荐
- Vim 安装和配置、优化
Vim 介绍 Vim 官网:http://www.vim.org/ Vim 安装 CentOS:sudo yum install -y vim Ubuntu:sudo apt-get install ...
- 杭电------2048神上帝以及老天爷(C语言写)
#include<stdio.h> ] = { -,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,- }; ] = { }; long long jiec ...
- pymongo(看后转载,在原基础上添加了类连接和简单调用)
一.MongoDB 数据库操作 1. 连接数据库 import pymongo conn = pymongo.Connection() # 连接本机数据库 # conn = pymongo.Conne ...
- TCP/IP分为几层?各层的作用是什么?
1. 应用层 2.传输层 3.网络层 4.网络接口层* 1.应用层 TCP/IP协议族在这一层面有着很多协议来支持不同的应用,许多大家所熟悉的基于Internet的应用的实现就离不开这些协议.如我们进 ...
- Java中HashSet的重复性与判等运算重载
目录 还有一个故事--(平行世界篇) 还有一个美丽的梦幻家园:java.util 并且还有一个善战的达拉崩巴:HashSet 还有另外一个故事(不是虚假传说) 还有一对涂满毒药的夺命双匕:equals ...
- MySQL的JDBC驱动(8.0版本)
1.引用外部库 mysql-connector-java-8.0.版本的jar 2.jdbc驱动类:com.mysql.jdbc.Driver 改成 com.mysql.cj.jdbc.Drive ...
- Angular4.0环境搭建
1.安装nodejs 先装nodejs,如果你的电脑已经装过了,最好确认是比较新的版本,否则可能会出问题 下载地址:https://nodejs.org/en/download/ 安装过程很简单,一直 ...
- 消息总线:Spring Cloud Stream
最近在学习Spring Cloud的知识,现将消息总线:Spring Cloud Stream 的相关知识笔记整理如下.[采用 oneNote格式排版]
- 解决jmeter5.1高版本linux CPU,IO,Memory监控性能测试 java.lang.NoSuchMethodError: org.apache.jmeter.samplers.SampleSaveConfiguration.setFormatter(Ljava/t
jmeter中也可以监控服务器的CPU和内存使用情况,但是需要安装一些插件还需要在被监测服务器上开启服务. 安装性能监控插件(jmeter-plugins)后报如下错误,是由于jmeter版本过高jm ...
- SSH自动断开后重连的解决方案
注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/ssh-conn ...