前端（jQuery）（4）-- jQuery隐藏显示与淡入淡出、滑动、回调
1、隐藏与显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);/*慢慢隐藏*/
});
$("#show").click(function(){
$("p").show(1000);/*慢慢显示*/
});
$("#btn3").click(function(){
$("p").toggle(1000);/*一个按钮实现隐藏和显示*/
});
});
</script>
</head>
<body>
<p>p元素</p>
<button id="hide">删除</button>
<button id="show">显示</button>
<button id="btn3">隐藏/显示</button>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<style>
div {
background: #ece023;
width: 30px;
height: 40px;
margin: 2px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body> <div></div> <script>
for ( var i = 0; i < 5; i++ ) {
$( "<div>" ).appendTo( document.body );
}
$( "div" ).click(function() {
$( this ).hide( 2000, function() {
$( this ).remove();/*这条语句是在动画执行完成之后再执行的，
否则在外面就是意思就是直接删除，就会看不到动画效果了*/
});
});
</script> </body>
</html>
2、淡入淡出
fadeIn()
fadeOut()
fadeTo()
fadeToggle()
3、滑动
slideDown()
slideToggle()
slideUp()
4、回调
回调函数，看jquery官方文档介绍是在动画执行完成之后执行该回调函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function () {
/*p元素先改变css样式，然后再向上滑动1秒，再向下滑动1秒*/
$("p").css("color", "red").slideUp(1000).slideDown(1000);
});
});
</script>
</head>
<body>
<p>这里是p元素</p>
<button id="button">点击按钮</button>
</body>
</html>
前端（jQuery）（4）-- jQuery隐藏显示与淡入淡出、滑动、回调的更多相关文章
- jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链
jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...
- jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链
隐藏和显示 $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度, ...
- Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- jQuery效果之隐藏与显示、淡入淡出、滑动、回调
隐藏与显示 淡入淡出 滑动效果
- jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...
- 前端设计——js实现图片切换的淡入淡出
1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...
- jQuery实现图片伦播效果(淡入淡出+左右切换)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
随机推荐
- innerHTML 属性用于获取或替换 HTML 元素的内容。
innerHTML 属性 innerHTML 属性用于获取或替换 HTML 元素的内容. 语法: Object.innerHTML 注意: 1.Object是获取的元素对象,如通过document.g ...
- css3 ---1 基本的选择器
基本的选择器 <style type="text/css"> /*通配符选择器*/ * { margin: ; padding: ; border: none; } / ...
- 阿里云容器服务通过LoadBalancer暴露IPv6服务
背景: IPv4地址已接近枯竭,被誉为下一代互联网技术的IPv6成为新的“全球互联网门牌号”,它可以让地球上的每一粒沙子都拥有地址.当下,各国都在加速推进下一代互联网的部署,工信部也互联网服务商提出了 ...
- java.sql.SQLException
java.sql.SQLException 出错:java.sql.SQLException: com.mchange.v2.c3p0.ComboPooledDataSource[ identityT ...
- 菜鸟nginx源码剖析数据结构篇（七） 哈希表 ngx_hash_t（下）[转]
菜鸟nginx源码剖析数据结构篇(七) 哈希表 ngx_hash_t(下) Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.c ...
- java 调用区块链 发布和调用智能合约
java连接区块链 很简单 ,调用智能合约要麻烦一些. 先说连接 区块链查询数据. 1 maven 项目导入 web3j 的依赖. <dependency> <groupId> ...
- Python实例1-Collatz 序列
编写一个名为 collatz()的函数,它有一个名为 number 的参数.如果参数是偶数,那么 collatz()就打印出 number // 2, 并返回该值.如果 number 是奇数, col ...
- python学习笔记4_数据清洗与准备
一.处理缺失值 pandas使用浮点值NaN(Not a Number)来显示缺失值,并将缺失值称为NA(not available(不可用)). NA常用处理方法: dropna:根据每个标签的值是 ...
- svn插件的所有链接
http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240
- java笔试之求int型正整数在内存中存储时1的个数
输入一个int型的正整数,计算出该int型数据在内存中存储时1的个数. 关键点:n与二进制的1相与:判断最末位是否为1:向右移位. 类似题目是查找输入整数二进制中1的个数. package test; ...