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

 <!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. 动态图片 gif

    简介 android不推荐使用gif图片,一般都是png的,对于gif的图片解析比较消耗资源,但是对于一些动态gif图片的播放,如果比较小的话还是可以的,要是大的话,建议还是把gif图片转换成一帧一帧 ...

  2. return;，return false，return true----------浅析

    作为新手,一直没注意他们的区别,今天特意在网上搜了搜. 1: retuen; 无返回值,表示终止函数往下执行 2: return true; a.返回 bool值 真 b.提交表单 针对<but ...

  3. LINQ简明教程：数据排序、分组、过滤

    LINQ可以对很多数据源进行查询操作,比如数据库.数组(array).链表(list).XML文件等.在本文中,我将从数组中提取数据,这些数据是10个最受欢迎的国家.有一个类叫Countries,有c ...

  4. 执​行​o​r​a​c​l​e​函​数​的​四​种​方​法

    1.在定义函数时:如果有参数,则参数可有类型但是不加长度. 2.在执行函数: var/variable var_name var_type(如果数据类型是number则没有长度,如果数据类型是varc ...

  5. sql 判断表、列、视图等是否存在

    1 判断数据库是否存在 if exists (select * from sys.databases where name = '数据库名')     drop database [数据库名] 2 判 ...

  6. c-100米球反弹

    #include <iostream> #define TIMES 10 int main(void) { ; ; //第一次反弹的高度. ; i <= TIMES; i++) { ...

  7. .NET 编译器（”Roslyn“）介绍

    介绍 一般来说,编译器是一个黑箱,源代码从一端进入,然后箱子中发生一些奇妙的变化,最后从另一端出来目标文件或程序集.编译器施展它们的魔法,它们必须对所处理的代码进行深入的理解,不过相关知识不是每个人都 ...

  8. 接入淘宝SDK(OneSDK)和支付宝SDK(AlipaySDK)出现 duplicate symbols for architecture i386

    起初我在我的项目中先接入了AlipaySDK,没有出现什么问题,之后想要接入淘宝SDK之后,就出现了duplicate symbols for architecture i386的错误 经过一段时间排 ...

  9. php插入转义与查找转义

    //转义用于查找 function deepslashes($data) { //判断data表现形式 if(empty($data)) { return $data; } return is_arr ...

  10. 配置CAS错误No Certificate file specified or invalid file format

    配置tomcat证书 keystore文件后启动一直报错:(tomcat版本:apache-tomcat-6.0.43) tomcat配置: <Connector port="8443 ...