<!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. os模块介绍

    一.os模块概述 Python os模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的.(一语中的) 二.常用方法 1.os.name 输出字符串指示正在使用的平台 ...

  2. Python_从字符串中提取号码

    import re telNumber = '''Suppose my Phone No. is 0535-1234567,yours is 010-12345678,his is 025-87654 ...

  3. nginx常用配置系列-静态资源处理

    接上篇,nginx处理静态资源的能力很强,后端服务器其实也可以处理静态资源,比如tomcat,但把非业务类的单一数据交给后端处理显然效率比较低,还有一种场景是多个站点公用一套资源集时,通过nginx可 ...

  4. Pat1128:N Queens Puzzle

    1128. N Queens Puzzle (20) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The & ...

  5. C语言检查ip是否合法

    在工作当中我们经常会遇到这种问题:判断一个输入的字符串是否为合法的IP地址,下面是一个测试小程序: #include <stdio.h> #include <string.h> ...

  6. Java开源生鲜电商平台-账单模块的设计与架构(源码可下载）

    Java开源生鲜电商平台-账单模块的设计与架构(源码可下载) 补充说明:Java开源生鲜电商平台-账单模块的设计与架构,即用户的账单形成过程. 由于系统存在一个押账功能的需求,(何为押账,就是形成公司 ...

  7. Java EE

  8. Jmeter运行后出现乱码

    1.响应结果出现乱码一般是编码的问题,汉子乱码在编码处编码写成utf-8 2.如果还不行,对jmeter的文件进行修改.具体修改方法参考https://blog.csdn.net/liu5781821 ...

  9. rest_framework之解析器、路由控制、分页

    解析器 我们都知道,网络传输数据只能传输字符串格式的,如果是列表.字典等数据类型,需要转换之后才能使用 但是我们之前的rest_framework例子都没有转换就直接可以使用了,这是因为rest_fr ...

  10. Python中使用MongoEngine2

    mongoengine基本用法实例: from mongoengine import * from datetime import datetime #连接数据库:test # connect('te ...