jQuery的淡入和淡出简单介绍
在jQuery中的一些特效中，可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()，下面为分别为大家介绍各个方式的使用。
jQuery fadeIn() 用于淡入已经被隐藏的元素，例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery淡入</title>
<style>
*{margin:0;padding:0;}
div{width:50px;height:50px;margin:10px;display:none;}
#div1{background: green;}
#div2{background: orange;}
#div3{background: yellow;}
</style>
<!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn(1000);
$("#div3").fadeIn("slow");
});
});
</script>
</head>
<body>
<p>实例演示了 fadeIn()不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
jQuery fadeOut() 用于淡入已经被隐藏的元素，例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery淡出</title>
<style>
*{margin:0;padding:0;}
div{width:50px;height:50px;margin:10px;}
#div1{background: green;}
#div2{background: orange;}
#div3{background: yellow;}
</style>
<!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut(1000);
$("#div3").fadeOut("slow");
});
});
</script>
</head>
<body>
<p>实例演示了 fadeIn()不同参数的效果。</p>
<button>点击淡出 div 元素。</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeToggle()切换</title>
<style>
*{margin:0;padding:0;}
div{width:50px;height:50px;margin:10px;}
#div1{background: green;}
#div2{background: orange;}
#div3{background: yellow;}
</style>
<!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle("slow");
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 不同参数的效果。</p>
<button>点击切换 div 元素。</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeTo透明度</title>
<style>
*{margin:0;padding:0;}
div{width:50px;height:50px;margin:10px;}
#div1{background: green;}
#div2{background: orange;}
#div3{background: yellow;}
</style>
<!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeTo不同参数的效果。</p>
<button>点击fadeTo透明度 div 元素。</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
jQuery的淡入和淡出简单介绍的更多相关文章
- jQuery效果--淡入和淡出
jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
- 关于JQuery简单介绍
jQuery是一个兼容多浏览器的javascript库,核心理念是写得更少,做得更多.如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用 ...
- 利用jQuery的淡入淡出实现轮播器
基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教 HTML: & ...
- jQuery 效果 - 淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果. 点击展示 淡入/淡出 面板 实例 jQuery fadeIn()演示 jQuery fadeIn() 方法. jQuery fadeOut()演示 ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- jQuery 效果 – 淡入淡出
在在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuer ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- jQuery学习----简单介绍，基本使用，操作样式，动画
jQuery简单介绍 jq是js的插件库,说白了,jq就是一个js文件 凡事能用jq实现的,js都能实现.但是js能实现的,jq不一定能够实现 jq的引入 http://www.bootcdn.cn ...
- jQuery 简单介绍
jQuery 简单介绍 jQuery的定义 jQuery是一个快速,小巧,功能丰富的JavaScript库.它通过易于使用的API在大量浏览器中运行,使得 HTML文档遍历和操作,事件处理,动画 ...
随机推荐
- 【转载】 linux dig 命令使用方法
原文地址: https://www.imooc.com/article/26971?block_id=tuijian_wz 作者:ibeautiful来源:慕课网 ------------------ ...
- 004-行为型-01-策略模式（Strategy）
一.概述 定义了一系列算法,并将每个算法封装起来,使他们可以相互替换,且算法的变化不会影响到使用算法的客户.需要设计一个接口,为一系列实现类提供统一的方法,多个实现类实现该接口,设计一个抽象类(可有可 ...
- python多线程中join()的理解
在 Python 的多线程编程中,经常碰到 thread.join()这样的代码.那么今天咱们用实际代码来解释一下 join 函数的作用. 第一,当一个进程启动之后,会默认产生一个主线程,因为线程是程 ...
- iptables 的安装与配置
iptables 的安装与配置 由于centos7默认是使用firewall作为防火墙,下面介绍如何将系统的防火墙设置为iptables. #停止firewall systemctl stop fi ...
- Promise.resolve的作用
Promise.resolve方法有下面三种形式: Promise.resolve(value); Promise.resolve(promise); Promise.resolve(thenable ...
- k8s记录-flanneld+docker网络部署（四）
1)程序准备tar xvf flannel-v0.10.0-linux-amd64.tar.gz mkdir -p /data/projects/common/kubernetes/{bin,cfg, ...
- WebService学习总结(三)——使用JDK开发WebService(转)
一.WebService的开发手段 使用Java开发WebService时可以使用以下两种开发手段 1. 使用JDK开发(1.6及以上版本) 2.使用CXF框架开发(工作中) 二.使用JDK开发Web ...
- pca数学原理（转）
PCA的数学原理 前言 数据的向量表示及降维问题 向量的表示及基变换 内积与投影 基 基变换的矩阵表示 协方差矩阵及优化目标 方差 协方差 协方差矩阵 协方差矩阵对角化 算法及实例 PCA算法 实例 ...
- 【Leetcode_easy】997. Find the Town Judge
problem 997. Find the Town Judge solution: class Solution { public: int findJudge(int N, vector<v ...
- 03点睛Spring4.1-scope
转载:https://www.iteye.com/blog/wiselyman-2210377 3.1 scope scope描述spring容器是怎么样新建类的实例的(bean); 在spring中 ...