jQuery效果-淡入淡出
本文实现一个控制出现、消失、透明度的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="myjs2.js"></script>
</head>
<body>
<button id="in">fadeIn</button><!-- 慢慢出现动画 -->
<button id="out">fadeOut</button><!-- 慢慢消失动画 -->
<button id="toggle">fadeToggle</button><!-- 一个按钮直接控制出现/消失动画 -->
<button id="to">fadeTo</button><!-- 透明度效果 -->
<div id="div1" style="width:80px;display:none;height:80px;background-color: aqua"></div>
<div id="div2" style="width:80px;display:none;height:80px;background-color: #ece023"></div>
<div id="div3" style="width:80px;display:none;height:80px;background-color: darkgoldenrod"></div> </body>
</html>
js：
$(document).ready(function(){
$("#in").on("click",function(){
$("#div1").fadeIn();//fadeIn慢慢出现
$("#div2").fadeIn();
$("#div3").fadeIn();
});
$("#out").on("click",function(){
$("#div1").fadeOut();//fadeOut慢慢消失
$("#div2").fadeOut();
$("#div3").fadeOut();
});
$("#toggle").on("click",function(){
$("#div1").fadeToggle();//一个按钮直接控制出现/消失动画
$("#div2").fadeToggle();
$("#div3").fadeToggle();
});
$("#to").on("click",function(){
$("#div1").fadeTo(,0.5);//透明度效果,如淡化，1表示完全不透明，0表示完全透明
$("#div2").fadeTo(,0.7);
$("#div3").fadeTo(,0.3);
});
});
jQuery效果-淡入淡出的更多相关文章
- 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 ...
- 利用jQuery的淡入淡出实现轮播器
基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教 HTML: & ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- 利用jquery的淡入淡出函数（fadeIn和fadeOut)--实现轮播
首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果.利用jquery的淡入淡出函数(fadeIn和fadeOut).废话也不多说,边上代码 ...
- jQuery效果--淡入和淡出
jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
- 11.jQuery之淡入淡出效果
知识点:fadeIn fadeOut fadeToggle fadeTo <style> div { width: 150px; height: 300px; background ...
随机推荐
- 2_Linux_文件和权限处理命令
三.Linux的常用命令 1.文件命名规范 1)除了/之外,所有的字符都合法,文件名中不能包含/符号 2)有些字符最好不用,如空格.制表符.退格符和字符@#$&() 3)避免使用.作为普通文件 ...
- 自定义Toast
简易自定义Toast public class MainActivity extends ListActivity );//边角 gradientDrawable.setGradien ...
- 传入字典的模型项的类型为“System.Data.Entity.DynamicProxies.
今天做东西遇到了,这样的一个问题,最后了半天才找到问题所在,现在给大家分享一下问题所在: 传入字典的模型项的类型为“System.Data.Entity.DynamicProxies.doctorUs ...
- tomcat startup.sh提示java.lang.OutOfMemoryError: PermGen space
JAVA_OPTS="-server -XX:PermSize=512M -XX:MaxPermSize=1024m"if [ -z "$LOGGING_MANAGER& ...
- fopen,file_get_contents,curl的区别
1. fopen /file_get_contents 每次请求都会重新做DNS查询,并不对DNS信息进行缓存.但是CURL会自动对DNS信息进行缓存.对同一域名下的网页或者图片的请求只需 ...
- Arcgis Desktop 9.3 安装
以下用到的 Crack在我的网盘中有: ref: http://pan.baidu.com/s/1pJJlVBl 密码: p4gk 一,安装 Desktop(依次按照如图安装): 二,配置 1,以上步 ...
- Assembly 'Microsoft.Office.Interop.Excel
编译的时候报错,都无法通过编译: Assembly 'Microsoft.Office.Interop.Excel, Version=14.0.0.0, Culture=neutral, Public ...
- JavaWeb学习笔记之JSP（一）
1. JSP: 1.1. 为什么需要 JSP ? 如果使用Servlet程序来输出只有局部内容需要动态改变的网页,但是其中的静态网页内容也需要程序员使用Java语言来进行输出,这就造成了大量代码的冗余 ...
- 自定义异常throw
简单自定义一个年龄小于等于0,或者大于120会出现的异常 首先继承父类Exception,调用父类的构造器,这样才可以报出自己想要的异常 public class AgeException exten ...
- DeDe缩略图路径的修改
今天在使用dedecms的时候,遇到的一点小问题,移站的时候缩略图不显示.然后就去百度搜了一下,出来的都是千篇一律. 因为一个网站里面缩略图太多,手动比较慢而已费时间, 俗话说的好“时间就是生命” ...