<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

</head>

<body>

<div id="div" style="display:none; width:200px; height:200px; background-color:rebeccapurple"></div>

<input id="fadeIn" type="button" value="fadeIn">

<input id="fadeOut" type="button" value="fadeOut">

<input id="fadeToggle" type="button" value="fadeToggle">

<input id="fadeTo" type="button" value="fadeTo">

</body>

<script>

    $("#fadeIn").click(function(){

        $("div").fadeIn(1000);

    })

    $("#fadeOut").click(function(){

        $("div").fadeOut(1000);

    })

    $("#fadeToggle").click(function(){

        $("div").fadeToggle(1000);

    })

    $("#fadeTo").click(function(){

        $("div").fadeTo(1000, 0.5);

    })

</script>

</html>

HTML 练习淡入淡出的更多相关文章

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

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

  2. Android动画之淡入淡出

    为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见. 我们把当前要显示的View叫 ...

  3. jquery实现淡入淡出

    fade方法包括四个: (1)fadeIn(speed,callback):淡入的方法,speed代表淡入的速度,可以是slow,fast,毫秒,不填等 例如: $(document).ready(f ...

  4. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  5. [Android]异步加载图片，内存缓存，文件缓存，imageview显示图片时增加淡入淡出动画

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3574131.html  这个可以实现ImageView异步加载 ...

  6. 今天依然是 JQ点击事件之“点击淡入淡出事件”

    废话不多说,先贴代码,再解释 <script> $(document).ready(function(){ $("button").click(function(){ ...

  7. jQuery效果之隐藏与显示、淡入淡出、滑动、回调

    隐藏与显示 淡入淡出 滑动效果

  8. 定时器图片轮播淡入淡出基本功能已实现，正在修改BUG中。。（附图效果和源代码）

    用JQ写的源码如下: 实现功能: 1,图片自动按顺序轮播,轮播选中的图片透明度为1,其他为0.1: 2,鼠标停在的图片上透明度为1,其他为0.1: 3,鼠标离开,继续轮播,起始位置为鼠标停在的图片的下 ...

  9. js原生实现淡入淡出

         转自http://kb.cnblogs.com/page/90854/ 参数说明: fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, ...

  10. Unity3D特效-场景淡入淡出

    最近公司开始搞Unity3D..整个游戏..特效需求还是比较多的.关于UI部分的特效淡入淡出.看网上用的方法都是用个黑东东遮挡然后设置alpha这么搞....本大神感觉非常的low.而且很渣.故奋笔疾 ...

随机推荐

  1. java 回调函数解读

    模块间调用 在一个应用系统中,无论使用何种语言开发,必然存在模块之间的调用,调用的方式分为几种: (1)同步调用 同步调用是最基本并且最简单的一种调用方式,类A的方法a()调用类B的方法b(),一直等 ...

  2. STM32f030f4p6 内部flash 打包读写

    最近做到的项目在运行需要把一组uint8_t(unsigned char)的数据进行掉电储存,想到单片机STM32f030f4p6内部flash可以直接由程序操作,写了以下代码用于uint8_t数据打 ...

  3. 初识函数库libpcap

    由于工作上的需要,最近简单学习了抓包函数库libpcap,顺便记下笔记,方便以后查看 一.libpcap简介    libpcap(Packet Capture Library),即数据包捕获函数库, ...

  4. Project facet Java version 1.8 not supported JDK版本不对无法启动项目解决办法

    https://jingyan.baidu.com/article/6c67b1d69a59a02787bb1e30.html

  5. ES7 Async/Await 陷阱

    什么是Async/Await ES6新增了Promise函数用于简化项目代码流程.然而在使用promise时,我们仍然要使用callback,并且并不知道程序要干什么,例如: function doS ...

  6. 深入浅出javascript学习笔记

    弱类型的隐式转换: 32 + 32 // 64 "32" + 32 // "3232" "32" – 32 // 0 巧用+/-规则转换类型 ...

  7. 巩固java(六)----java中可变参数方法(非常实用哦)

    java提供了可变参数的方法,即方法的参数个数可以不确定,用"..."定义. import java.util.ArrayList; import java.util.List; ...

  8. RocketMQ源码 — 十、 RocketMQ顺序消息

    RocketMQ本身支持顺序消息,在使用上发送顺序消息和非顺序消息有所区别 发送顺序消息 SendResult sendResult = producer.send(msg, new MessageQ ...

  9. 关于Kafka监控方案的讨论

    之前在知乎上尝试过回答这个问题,后来问的人挺多,干脆在博客里面保存一下. 目前Kafka监控方案看似很多,然而并没有一个"大而全"的通用解决方案.各家框架也是各有千秋,以下是我了解 ...

  10. go语言 nsq源码解读四 nsqlookupd源码options.go、context.go和wait_group_wrapper.go

    本节会解读nsqlookupd.go文件中涉及到的其中三个文件:options.go.context.go和wait_group_wrapper.go. options.go 123456789101 ...