jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()
fadeIn(),fadeOut(),fadeToggle(),fadeTo()
<html>
<head>
<script src="./jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){ $("button#d").mousedown(function(){
$("button#d").css("color","red");
$("p#a").fadeOut("fast");
$("p#b").fadeOut("slow");
$("p#c").fadeOut(2000);
});
$("button#d").mouseup(function(){
$("button#d").css("color","black");
});
$("button#e").mousedown(function(){
$("button#e").css("color","red");
$("p#a").fadeIn("fast");
$("p#b").fadeIn("slow");
$("p#c").fadeIn(2000);
});
$("button#e").mouseup(function(){
$("button#e").css("color","black");
});
$("button#f").mousedown(function(){
$("button#f").css("color","red");
$("p#a").fadeToggle("fast");
$("p#b").fadeToggle("slow");
$("p#c").fadeToggle(2000);
});
$("button#f").mouseup(function(){
$("button#f").css("color","black");
});
$("button#g").mousedown(function(){
$("button#g").css("color","red");
$("p#a").fadeTo("fast",0.8);
$("p#b").fadeTo("slow",0.5);
$("p#c").fadeTo(2000,0.2);
});
$("button#g").mouseup(function(){
$("button#g").css("color","black");
});
});
</script>
</head>
<body>
<div style="border:1px solid;border-color:red;width:150px;height:216px;">
<div style="border:1px solid;border-color:white;height:70px;">
<p id="a"style="font-size:20px;color:red;">这是第一段</p>
</div>
<div style="border:1px solid;border-color:white;height:70px;">
<p id="b"style="font-size:20px;color:blue;">这是第二段</p>
</div>
<div style="border:1px solid;border-color:white;height:70px;">
<p id="c"style="font-size:20px;color:green;">这是第三段</p>
</div>
</div>
<button id="d">fadeOut</button><br/>
<button id="e">fadeIn</button><br/>
<button id="f">fadeToggle</button><br/>
<button id="g">fadeTo</button><br/>
</body>
</html>
效果:

fadeToggle(),Toggle(),slideToggle(),fadeTo()
jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()的更多相关文章
- jquery 中fadeIn,fadeOut动画
我们在做首页banner图片播放的时候会使用fadeIn,fadeOut动画,这里需要注意的是: fadeIn作用相当于:display:list-item;opcity逐渐变为1 fadeOut作用 ...
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- CSS 3 过渡效果之jquery 的fadeIn ,fadeOut
.div { visibility: hidden; opacity: 0; transition: visibility 0s linear 0.5s,opacity 0.5s linear; } ...
- Jquery效果代码--(二)
//jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...
- jQuery 效果 - 淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果. 点击展示 淡入/淡出 面板 实例 jQuery fadeIn()演示 jQuery fadeIn() 方法. jQuery fadeOut()演示 ...
- jQuery 效果 – 淡入淡出
在在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuer ...
- jQuery效果--淡入和淡出
jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
- 松软科技课堂:jQuery 效果 - 淡入淡出
jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
- jquery 效果笔记
jquery效果 显示隐藏 show() 语法 show([speed,[easing],[fn]]) 参数可以省略,无动画直接使用 hide() to ...
随机推荐
- 简单对比git pull和git pull --rebase的使用
使用下面的关系区别这两个操作:git pull = git fetch + git mergegit pull --rebase = git fetch + git rebase 现在来看看git m ...
- java.lang.NoClassDefFoundError: org/apache/commons/lang3/StringUtils
♦ 问题所在:项目lib包里少一个jar包 ♦ 解决办法: commons-lang3-3.1.jar 导入到项目就ok
- python结合pyvmomi批量关闭vmware虚拟机
#!/usr/bin/env python #参考https://github.com/vmware/pyvmomi/blob/master/sample/poweronvm.py "&qu ...
- VMware的NAT网络模式
参考链接:https://www.cnblogs.com/linjiaxin/p/6476480.html 图例:
- Caffe+Matlab'hole
有时候,多坚持一小下下就成功了,遇到问题就频繁重装系统并不可取!放弃很容易,但坚持真的很酷! 1.安装依赖库也能出问题 命令行输入: sudo apt-get install libprotobuf- ...
- Hibernate Envers
一.目的Hibernate Envers的目的是提供应用程序实体数据的历史版本,记录执行数据变更历史. 二.用途Hibernate Envers记录的审计数据,主要用于意外丢失数据找回.审查数据合法性 ...
- mysql查看索引与锁
http://www.cnblogs.com/cocos/archive/2011/05/06/2039428.html Mysql乐观锁与悲观锁 http://www.cnblogs.com/esi ...
- Javascript我学之四作用域
本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘 作用域 JavaScript的变量作用域只有两种,全局作用域和函数作用域. 函数的作用域 函数中定义的变量是私有的,仅在本函数范围内有效,称为 ...
- C#软件监控外部程序运行状态
需要外挂一个程序,用于监控另一个程序运行状态,一旦检测到另一程序关闭,就触发一个事件做其他处理. 引用的类 1 using System.Diagnostics;//引入Process 类 声明 1 ...
- sklearn数据库-【老鱼学sklearn】
在做机器学习时需要有数据进行训练,幸好sklearn提供了很多已经标注好的数据集供我们进行训练. 本节就来看看sklearn提供了哪些可供训练的数据集. 这些数据位于datasets中,网址为:htt ...