本文实现一个控制出现、消失、透明度的效果

 <!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效果-淡入淡出的更多相关文章

  1. JQuery效果-淡入淡出、滑动、动画

    一.JQuery Fading方法 JQuery 有四种fade方法 1.fadeIn() 淡入                       对应也有$(selector).fadeIn(speed, ...

  2. jQuery 效果 - 淡入淡出

    通过 jQuery,您可以实现元素的淡入淡出效果. 点击展示 淡入/淡出 面板 实例 jQuery fadeIn()演示 jQuery fadeIn() 方法. jQuery fadeOut()演示 ...

  3. jQuery 效果 – 淡入淡出

    在在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuer ...

  4. 松软科技课堂:jQuery 效果 - 淡入淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  5. 利用jQuery的淡入淡出实现轮播器

    基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教 HTML: & ...

  6. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  7. 利用jquery的淡入淡出函数（fadeIn和fadeOut)--实现轮播

    首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果.利用jquery的淡入淡出函数(fadeIn和fadeOut).废话也不多说,边上代码 ...

  8. jQuery效果--淡入和淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  9. 11.jQuery之淡入淡出效果

    知识点:fadeIn   fadeOut  fadeToggle  fadeTo <style> div { width: 150px; height: 300px; background ...

随机推荐

  1. [转] Console命令详解,让调试js代码变得更简单

    http://www.cnblogs.com/see7di/archive/2011/11/21/2257442.html Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上 ...

  2. Ubuntu 14.04 配置vsftpd实现FTP服务器 - 通过FTP连接AWS

    测试主机:亚马逊AWS EC2 系统:Ubuntu 14.04 想用AWS来做服务器玩,结果发现其不能像简单使用阿里云服务器那样用ftp连接,反正也不熟悉ftp服务器搭建,那就乘这个机会学习一下如何利 ...

  3. 一个中高级PHP工程师所应该具备的能力

    很多面试,很多人员能力要求都有“PHP高级工程师的字眼”,如果您真心喜欢PHP,并且您刚起步,那么我简单说说一个PHP高级工程师所应该具备的,希望给初级或已经达到中级的PHP工程师一些帮助. 一.平静 ...

  4. 安装Microsoft oneDrive(原skyDrive)

    oneDrive下载地址:https://onedrive.live.com/about/zh-cn/download/ 安装时报错:Error 0x80040ca0 解决方案:关闭安装程序,按下面的 ...

  5. css ie hack整理

    网上有很多关于ie hack的文章,可能由于文章发布后ie的版本还在升级.所以导致有些hack写法已经不适用了.以下是本人整理的ie6-11的一些hack常用写法.(以下默认文档模式为标准模式) 1. ...

  6. junit测试用例加载spring配置文件

    junit加载pom引用项目的xml配置文件,如果定义了<beans profile="dev">,必须在测试用例类上面加上标记 @ActiveProfiles(&qu ...

  7. 一条insert语句批量插入多条记录

    一条insert语句批量插入多条记录 常见的insert语句,向数据库中,一条语句只能插入一条数据: insert into persons (id_p, lastname , firstName,  ...

  8. MySQL MyISAM/InnoDB高并发优化经验

    最近做的一个应用,功能要求非常简单,就是 key/value 形式的存储,简单的 INSERT/SELECT,没有任何复杂查询,唯一的问题是量非常大,如果目前投入使用,初期的单表 insert 频率约 ...

  9. Cacti监控Windows主机，Windows主机的正确配置

    使用cacti监控Windows主机的时候经常遇到无法获取Windows主机的snmp信息和Windows主机的硬件信息,主要原因是Windows主机没有正确配置snmp,以下是正确的配置步骤:1.安 ...

  10. Hbase常用操作

    下面我们看看HBase Shell的一些基本操作命令,我列出了几个常用的HBase Shell命令,如 名称 命令表达式 创建表 create '表名称', '列名称1','列名称2','列名称N' ...