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 ...
随机推荐
- jquery.ajax()详解
jQuery.ajax() 函数详解 traditional 如果你希望使用传统方式来序列化参数,将该属性设为true. 传递数组时, traditional必须为true var arr = []; ...
- laravel5.4 导出 Excel 表格
1.执行 composer require maatwebsite/excel 2. composer.json 文件出现(或者手动添加) 3.在config目录下 app.php 添加参数 4.导出 ...
- js、jq获取屏幕宽高
参考资料 JS,Jquery获取各种屏幕的宽度和高度
- python中requests的用法
一个最简单的demo: html = requests.get('http://www.cnblogs.com/liaocheng/p/5215225.html') return html.text ...
- 题解-CodeChef IOPC14L Sweets Problem
Problem CodeChef-IOPC14L 题目概要:给定 \(n\) 种糖果且给定每种糖果的数量 \(A_i\),\(Q\) 组询问,每次问选出 \(S\) 个糖果的方案数(模\(10^9+7 ...
- Python 官方中文教程(简)
Python 官方教程 前言 这是一次系统学习Python官方教程的学习笔记 整个教程一共16章, 在学习过程中记录自己不知道的和一些重要的知识, 水平有限, 请指正. Python3.7 官方教程. ...
- C#常用的单元测试框架
C#常用的单元测试框架有XUnit .NUnit .MSTest 做过单元测试的同学大概都知道以上几种测试框架,这几种框架除了标注测试类和方法的特性用的不一样之外,XUnit 和 NUnit 是非常相 ...
- Java项目使用SQLite数据库后无法启动的问题
背景: Java > maven 的 jar 项目 功能是记录用户的每天的按键次数 使用 jar2exe 工具将 jar 转为 exe 可执行文件 原本项目中使用的Mysql数据库,使用Myba ...
- Windows下多个Mysql实例配置主从(转)
https://www.cnblogs.com/jpfss/p/8143720.html 序: 网上有很多类似的文章,也是各种百度出来的,但是对于多数刚开始接触MYSQL主从的小白来说,网上文 ...
- 使用Percona Data Recovery Tool for InnoDB恢复数据
运维工作中难免会发生一些误操作,当数据库表被误操作删除需要紧急恢复,或者没有备份时,Percona Data Recovery Tool for InnoDB这个工具也已提供一些便捷的恢复. 当然 ...