<!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. day12 EL 表达式和国际化开发

    day12 EL 表达式和国际化开发 1. EL(Expression Language) 表达式简介 1.1 执行运算 1.2 获取web开发常用对象(el 中定义了11个隐式对象) 1.3 使用 ...

  2. 【转】搭建自己的 sentry 服务

    1. 安装 docker 首先要确认你的 Ubuntu 版本是否符合安装 Docker 的前提条件.如果没有问题,你可以通过下边的方式来安装 Docker : 使用具有 sudo 权限的用户来登录你的 ...

  3. 从CSDN到cnblogs

    博客热的年代,我也赶潮流,开了不少,以前的blogbus博客大巴,CSDN,以及MSN space,再到新浪博客,微博... 提笔写的热情越来越少,这次准备重新整理以前在CSTQB.业界分享的一些内容 ...

  4. SSM-Spring-19：Spring中JdbcTemplate

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- Spring自带一个ORM持久化框架JdbcTemplate,他可以说是jdbc的加强版,但是对最细微的控制肯 ...

  5. 五个最佳RSS新闻阅读器

    文章出自http://www.williamlong.info/archives/1591.html 在博客和在线新闻充斥的互联网上,大量信息已经使得用户阅读量过载,幸运的是,通过RSS Feed提供 ...

  6. sed、awk——运维必须掌握的两个工具

    今天主要跟大家介绍2个非常霸道的工具,sed和awk,本篇文章将介绍这两个工具在日常运维中的常用用法,工作中这两个工具要掌握好了在结合一些管道命令.正则表达式,日常处理事务简直666啦! l Sed ...

  7. 用Visual Studio Code Debug世界上最好的语言(Mac篇)

    用Visual Studio Code Debug世界上最好的语言(Mac篇) 首先,你要有台Macbook Pro,接着才继续看这个教程. PS:Windows用户看这里用Visual Studio ...

  8. bash: scrapy: command not found

    一.场景 执行  pip install scrapy 后,安装成功且执行 import scrapy  成功 二.问题 在shell中执行 scrapy 返回 bash: scrapy: comma ...

  9. Ubuntu常用命令总结

    1. Ubuntu切换到root用户的方法 sudo su or sudo -i 退出root用户 exit 2. mv:移动文件或文件夹 移动文件和文件夹只有只有四种可能: 文件移动到文件(文件重命 ...

  10. Java 学习笔记 (五) Java Compile\Build\Make的区别

    以下内容引自: http://blog.51cto.com/lavasoft/436216 Compile.Make和Build的区别 原创leizhimin2010-11-30 11:30:20评论 ...