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

 <!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. Java基础知识强化91：DateFormat类之DateFormat实现日期和字符串的相互转换

    1. DateFormat类概述: DateFormat 是日期/时间格式化子类的抽象类,它以与语言无关的方式格式化并解析日期或时间. 是抽象类,所以使用其子类SimpleDateFormat 2.  ...

  2. 递归---NYOJ-176 整数划分(二)和NYOJ-279队花的烦恼二

    这道题目的递归思想和第一个题差不多, 主要思想是:func(n, m)的作用是将n划分为m个. 1. 如果n < m 的时候肯定是不能划分的,所以就返回0 2. 如果m = 1 或者 n = m ...

  3. zendstudio正则匹配查询

    Ctrl+H之后,显示的File Search标签页为Containing text. Alt+/ 帮助提示正则匹配的语法. 例子如下: select type from table where id ...

  4. PHP与memcache和memcached以及安装使用

    老规则,在作者寒冰讲之前我们要来明确memcache与memcached这两个东西到底是什么? 说法一: 两个不同版本的php的memcached的客户端 new memcache是pecl扩展库版本 ...

  5. 如何打开Windows Server 2003 内存寻址扩展

    本文介绍了如何在系统内存大于4G的情况下,让windows2003 Advanced Server支持大内存的方法: 由于Windows2003 32bit是32位操作系统,当服务器配备内存高达4G时 ...

  6. JavaScript 客户端JavaScript之Document对象中的表单和表单元素

    Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...

  7. String类扩展

    String s1=new String("fsdfsd"); String s2=new String("fsdfsd"); String a1=" ...

  8. InnoDB概览

    InnoDB 采用了MVCC来支持高并发,并且实现了四个标准的隔离级别.其默认级别是REPEATABLE READ(可重复读) ,并且,通过间隙锁(next-key locking)策略防止幻读的出现 ...

  9. @NotNull丶@NotBlank丶@NotEmpty

    1.@NotNull:不能为 Null,但是可以为Empty:用在基本数据类型上. @NotNull(message="{state.notnull.valid}", groups ...

  10. java学习笔记(13) —— google GSON 实现json转化方法

    1.配置struts.xml <action name="getGsonAction" class="com.test.action.json.GetGsonAct ...