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/ ...
随机推荐
- sql server 常见问题笔记
1.关于复制类型 快照发布:发布服务器按预定的时间间隔向订阅服务器发送已发布数据的快照. 事务发布:在订阅服务器收到已发布数据的初始快照后,发布服务器将事务流式传输到订阅服务器. 对等发布:对等发布支 ...
- XE6 & IOS开发之开发者账号、苹果证书(3):关于在XE6中使用苹果证书的简单介绍
网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.关于在XE6中使用苹 ...
- Android开发-Android Studio使用问题解决
回头一看,很久没来更新了,归其原因,还是懒癌发作,倒是生活作息规律了,几乎每天都在11点前休息.今天趁着培训,使用android studio,发现几个坑: 1.android studio每次都提示 ...
- 【转载】Understand the serialVersionUID
If you have ever implemented Serializable interface, you must encounter this warning message The ser ...
- delphi.thread.线程循环执行体结构
线程话题太大,又都是些坑,不知从哪方面讲起,所以,想一出是一出了. 不管怎样,我们从开始使用D,不管有没有用线程,其实它已经帮我们做了一个最完整的线程执行处理:Application.Run. 这行A ...
- 可分组的选择框控件(MVVM下)(Toggle样式 仿造单选框RadioButton,复选框CheckBox功能)
原地址: http://www.cnblogs.com/yk250/p/5660340.html 效果图如下:支持分组的单选框,复选框样式和MVVM下功能的实现.这是项目中一个快捷键功能的扩展. 1, ...
- django--app(六)
1.应用加载 服务启动后,再新添加应用,是不会自动加载的,需要重启服务.
- jsp+servlet+mysql 实现简单的银行登录转账功能
jsp+servlet+mysql 实现简单的银行登录转账功能 [前期的准备] html(登录界面),servlet(处理业务逻辑),jsp(主要实现界面),mysql(实现与数据库的简单的交互)先从 ...
- C# 利用反射给不同类型对象同名属性赋值
public class ObjectReflection { public static PropertyInfo[] GetPropertyInfos(Type type) { return ty ...
- Python自动获取数据库表结构
Sandman https://sandman.readthedocs.io/en/latest/#