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/ ...
随机推荐
- 设计一个Stack,要求Push、Pop、获取最大最小值时间复杂度都为O(1)
面试的时候,面试官让设计一个栈,要求有Push.Pop和获取最大最小值的操作,并且所有的操作都能够在O(1)的时间复杂度完成. 当时真没啥思路,后来在网上查了一下,恍然大悟,只能恨自己见识短浅.思路不 ...
- 【原】mysql慢日志分析
pt-query-digest slowquery.log --since "2016-01-23 10:50:00"
- LRU implement Data Structure analysis
三种数据结构实现的LRU对比分析: 自适应循环链表, 跳表 和 伸展树 对比发现 : 跳表比其他两个会好一些(命中率) 来自论文 Performance Analysis of LRU
- node.js搭建简单的websocket
1.首先在官网http://www.nodejs.org/下载NODE.JS 2.打开命令行CMD,进入NODEJS\node_modules\的目录,输入npm install socket.io ...
- .html()和.text()的区别
在页面调用接口显示数据的时候,正常情况下.html()和.text()都可以显示数据内容,但是在特殊情况下,比如接口中这个参数为空的时候就表现出差距了,.html()显示的是空白,而.text()显示 ...
- php-fpm 在centos 7下的安装配置
安装php: sudo yum install php php-fpm php-mysql php-mbstring php-mcrypt php-sockets php-curl php-commo ...
- 关于NK3C使用富文本编辑器(CKEditor)发送HTML邮件的使用说明
目前NK3C发送HTML邮件使用的的编辑器是CKEditor4.6版本,关于CKEditor的使用说明如下: 1.依赖JQuery1.7版本以上,在xxx.vm中<head>< ...
- 你是否经常忘记网站上的各种密码?分享个密码管理软件LastPass
现在网络那么发达,我们上网的每个人势必会在各个网站上登陆,那势必会有一堆密码需要管理,那怎么能记住那么多网站的密码呢?我之前的做法是设置几个常用的密码,好多不重要的网站用一个,重要的网站用一个,然 ...
- IE8下标签float导致的bug。
前几天帮朋友写一个页面,今天在IE8下面发现一个很奇葩的问题,给a标签添加了float:left之后a标签内的图片不显示了,去掉float:left之后就能正常显示. 代码: <!DOCTYPE ...
- 树莓派(rasperberry pi 2)上装mysql远程无法访问
于是组合关键字(树莓派 mysql)求百度问谷歌.未果.操刀自己来吧.检查mysql的配置文件 /etc/mysql/my.cnf 发现如下配置 # Instead of skip-networkin ...