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/ ...
随机推荐
- java读取文件之txt文本
1.方法一: public static String txt2String(File file){ 13 String result = ""; 14 try{ 15 Buffe ...
- Git Pro - (1) 基础
近乎所有操作都可本地执行 在Git中的绝大多数操作都只需要访问本地文件和资源,不用连网. 三种状态 对于任何一个文件,在 Git 内都只有三 种状态:已提交(committed),已修改(modifi ...
- 规则引擎集成接口(九)Java类对象
Java类对象 右键点击“对象库” —“添加java类对象”,如下图: 弹出窗体,在文本框中输入类的全名“com.flagleader.test.Test”,选择该类型后确定,如下: 显示如下,勾选上 ...
- EX的魔方
https://www.luogu.org/problem/show?pid=2007 题目背景 常神牛从来没接触过魔方,所以他要借助计算机来玩.即使是这样,他还是很菜. 题目描述 常神牛家的魔方都是 ...
- 关于oracle中创建新表时将我们要用的表的结构和数据都复制过去
今天在oracle中遇到了一个问题,就是给我查询出来了一张表的数据,只有部分的字段,让我将这张表的结构和数据放到新的临时表中,并进行数据的查询. 我是这样做的: 如:create table tabl ...
- gdb 调试
一.gdb 调试-源代码关联 在调试程序的过程中,可以自由地查看相关的源代码(如果有源代码的话)是一项最基本的特性.gdb 当然也提供了这项特性,虽然不如IDE直观,但在一定程度上要比IDE更加灵活和 ...
- 移动端WEB页面
百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...
- 《UNIX/Linux网络日志分析与流量监控》新书发布
本书从UNIX/Linux系统的原始日志(Raw Log)采集与分析讲起,逐步深入到日志审计与计算机取证环节.书中提供了多个案例,每个案例都以一种生动的记事手法讲述了网络遭到入侵之后,管理人员开展系统 ...
- 2016/9/25编写java实验报告时对synchronized(同步代码块)的一些感悟
通过此次实验,明白了多线程的设置和启动.synchronized代码块的用法.线程的优先级使用方法.知道了那几类资源是线程共享的. 我现在理解的多线程是:实例化一个继承了Thread类或实现了Runn ...
- javascript-with()方法
1)简要说明 with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象. 2)语法格式 with(object ...