<!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. 读《图解HTTP》有感-（了解web及网络基础）

    写在前面 <图解HTTP>是由上野宣先生著,于均良先生译 闲暇之余!写写博文甚是高兴.如有不准确,望各位斧正.共同学习! 正文 HTTP协议是什么?能做什么? HTTP(超文本传输协议)实 ...

  2. R画网络图

    R  画网络图 目的:用R做生信分析,画基因样本的网络图,从中观察样本的致病性情况. 一.所用到的包 library(tidyr) library(ggplot2) library(reshape2) ...

  3. Maven项目打包为jar的几种方式

    这里收集整理下以往打包MAVEN项目为JAR包的各种方式 直接打包,不打包依赖包 直接打包,不打包依赖包,仅打包出项目中的代码到JAR包中.在POM中添加如下plugin即可,随后执行maven in ...

  4. git的个人配置

    一..gitconfig存储在当前用户所在文件目录下,如图1.1. 图1.1 二.git拉取代码的服务器.用户名.密码,存储的所在位置,如图1.2. 图1.2 三.是否保存密码,由.gitconfig ...

  5. c++右值引用以及使用

    前几天看了一篇文章<4行代码看看右值引用> 觉得写得不错,但是觉得右值引用的内容还有很多可以去挖掘学习,所以总结了一下,希望能对右值引用有一个更加深层次的认识 一.几个基本概念 1.1左值 ...

  6. SQL Server 2008更改数据库保存路径

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=641 操作环境: WindowsXP 数据库: Microsoft SQL Server 2008 操作步骤: 选中 ...

  7. tk.mybatis.mapper.provider.SpecialProvider.<init>()

    2017-03-26 23:44:29.192 ERROR 48392 --- [p-nio-80-exec-5] c.t.global.exception.GlobalExHandler : nes ...

  8. java，maven工程打tar.gz包执行main方法

    一,需要在pom.xml文件添加plugin, 项目目录结构 <build> <plugins> <plugin> <artifactId>maven- ...

  9. 玩转spring mvc(六)---自定义异常跳转页面

    本文主要是关于如何在出现异常 如404时,跳转到自定义的异常页面,当然这不是spring的知识,但可以整合进去. 在web.xml中新增如下代码,里边的路径可以根据实际情况进行修改 <!-- 7 ...

  10. QM

    答案: C 解题: 1. PV = 1,2 / 11% = 10.91 NPV = PV(inflow)-PV(outflow) = 10.91 - 8 = 2.91 2. IRR : NPV = 0 ...