前端（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结构如下: & ...
随机推荐
- JS流程控制语句 反反复复(while循环) 和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。
反反复复(while循环) 和for循环有相同功能的还有while循环, while循环重复执行一段代码,直到某个条件不再满足. while语句结构: while(判断条件) { 循环语句 } 使用w ...
- linux centos&Ubuntu&RedHat更换软件源
linux三大版本更换软件源 前排提示,有的源可能已经失效,如果发现请留言或自行寻找其他源. 1.centos mv /etc/yum.repos.d/CentOS-Base.repo [--path ...
- arp协议简单介绍
1. 什么是ARP? ARP (Address Resolution Protocol) 是个地址解析协议.最直白的说法是:在IP以太网中,当一个上层协议要发包时,有了该节点的IP地址,ARP就能提供 ...
- JAVA数据结构之数组
接下来的几篇博文会在最近仔细研读数据结构与算法的书籍后会摘录一些要点和总结一些自己的心得体会,帮助大家更深入地理解java中的数据结构和一些基本的算法,同时巩固自己数据结构和算法这些最基础的计算机知识 ...
- 转载：Linux命令经典面试题：统计文件中出现次数最多的前10个单词
1.使用linux命令或者shell实现:文件words存放英文单词,格式为每行一个英文单词(单词可以重复),统计这个文件中出现次数最多的前10个单词 主要考察对sort.uniq命令的使用,相关解释 ...
- JWT生成token
1.JWT简介 JSON Web Token 简称JWT.一个JWT实际上就是一个字符串,它由三部分组成,头部.载荷与签名.JWT生成的token是这样的 2.Json Web Token(JWT)生 ...
- thinkphp 模板赋值
如果要在模板中输出变量,必须在在控制器中把变量传递给模板,系统提供了assign方法对模板变量赋值,无论何种变量类型都统一使用assign赋值. 大理石平台检定规程 $this->assign( ...
- Python-面向对象之高级进阶
目录 classmethod与staticmethod 面向对象高级 isinstance.issubclass 反射 魔法方法(类内置方法) 单例模式 classmethod与staticmetho ...
- golang和python的二进制转换
1.二进制转换规则 比如13,对13整除2,余数1,整除变为6,依次类推 13/2=6余1 6/2=3余0 3/2=1余1 1/2=0余1 所以最后的结果为1101 2.python def conv ...
- 基于MFC的实时可视化项目中视图刷新消息的严谨使用
在实时可视项目中,视图的实时刷新显示对软件的体验感来说非常重要,当算法的效率达到实时,比如一秒40帧,如果实时显示帧率更不上,则体验感将大大折扣,让用户感觉你的算法并没有40帧,当然最关键的是解决显示 ...