jquery实现淡入淡出
fade方法包括四个:
(1)fadeIn(speed,callback):淡入的方法,speed代表淡入的速度,可以是slow,fast,毫秒,不填等
例如:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
(2)fadeOut(speed,callback)方法:淡出的方法,参数的意义如上。
例如:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
(3)fadeToggle(speed,callback)方法:可以同时切换淡入淡出。
例如:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
(4)fadeTo(speed,opacity,callback)方法:允许渐变为给定的不透明度(值介于 0 与 1 之间),相当于不是淡入或者淡出完全不见,而是淡出到一个程度,有了一个透明度。
例如:
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
jquery实现淡入淡出的更多相关文章
- 利用jQuery的淡入淡出实现轮播器
基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教 HTML: & ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- 利用jquery的淡入淡出函数(fadeIn和fadeOut)--实现轮播
首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果.利用jquery的淡入淡出函数(fadeIn和fadeOut).废话也不多说,边上代码 ...
- 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 效果 - 淡入淡出
jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
- 11.jQuery之淡入淡出效果
知识点:fadeIn fadeOut fadeToggle fadeTo <style> div { width: 150px; height: 300px; background ...
- jQuery 标签淡入淡出 个人随笔
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- [hihoCoder1329] 带Split和Merge的Treap
题目链接:http://hihocoder.com/problemset/problem/1329 这题本来是学Splay的题,但是我为了练习Treap的Split和Merge操作,就借来用一用. 就 ...
- BC之jrMz and angles
jrMz and angles Accepts: 594 Submissions: 1198 Time Limit: 2000/1000 MS (Java/Others) Memory Lim ...
- 交换机做Channel-Group
core1#conf tEnter configuration commands, one per line. End with CNTL/Z.core1(config)#inter range g ...
- jquery append 方法应用
<!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...
- LR12.53—第3课:重播Vuser脚本
第3课:重播Vuser脚本 在前面的教训,你记录了一组典型的用户行为,并准备重播脚本. 重播脚本之前,您可以配置脚本的运行时设置,它定义了Vuser的行为. 注:记录与基于Web的协议的地方WebTo ...
- iptables日志探秘
iptables日志探秘 防火墙的主要功能除了其本身能进行有效控制网络访问之外,还有一个很重要的功能就是能清晰地记录网络上的访问,并自动生成日志进行保存.虽然日志格式会因防火墙厂商的不同而形态各异,但 ...
- PSP个人项目耗时记录
估计这个任务需要多少时间: 计划 估计用时 估计这个任务需要多少时间 500min 开发 450min 需求分析 120min 生成设计文档 20min 设计复审 30miin 代码规范 10min ...
- Linux 命令 创建文件
1.vi vi 1.txt 会直接创建并打开一个文件1.txt 2.touch touch的作用是更改一个文件或目录的时间.touch 2.txt 如果2.txt不存在,则创建空文件2.txt 3.e ...
- android 非activity如何得到布局文件 (java文件中获取布局文件)
Android中得到布局文件对象有两种方式第一种,在Activity所在类中this.getLayoutInflater().inflater(R.layout.布局文件名,null);第二种,在非A ...
- PIC32MZ tutorial -- Core Timer
Core Timer is a very popular feature of PIC32 since it is a piece of the MIPS M4K core itself and is ...