前端（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结构如下: & ...
随机推荐
- webpack英文文档
https://github.com/webpack/docs/wiki/contents
- webpack打包出错分析
Module not found: Error: Can't resolve 'bundle.js' in 更改打包命令 webpack run1.js -o bundle.js
- Android开发 从代码里设置Drawable图片不显示的问题
问题描述 我们从代码里获得Drawable在设置给View时会发现,图片不显示的问题.比如如下代码: Drawable drawable = getResources().getDrawable(R. ...
- windows10 家庭版 无法远程2012的解决
windows 10安装最新补丁后无法远程windows server 2008.2012服务器 报错信息如下:出现身份验证错误,要求的函数不受支持 可能是由于CredSSP加密Oracle修正. ...
- VS2010-MFC（对话框：非模态对话框的创建及显示）
转自:http://www.jizhuomi.com/software/162.html 前面已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.本节会将上一讲中 ...
- iOS开发CoreData的简单使用
1.简介 CoreData是iOS5后,苹果提供的原生的用于对象化管理数据并且持久化的框架.iOS10苹果对CoreData进一步进行了封装,而且效率更高!相关类的简单介绍: NSManagedObj ...
- log4j的使用及与mybatis应用
log4j 输出级别 fatal(致命信息)>error(错误信息)>warn(警告信息)>info(普通信息)>debug(调试信息)>all(所有) log4j.pr ...
- TensorFlow实战Google深度学习框架-人工智能教程-自学人工智能的第二天-深度学习
自学人工智能的第一天 "TensorFlow 是谷歌 2015 年开源的主流深度学习框架,目前已得到广泛应用.本书为 TensorFlow 入门参考书,旨在帮助读者以快速.有效的方式上手 T ...
- C# 检测真实的文件类型函数
private bool IsAllowedExtension(HttpPostedFile hifile) { bool ret = false; System.IO.FileStream fs = ...
- python基础-re正则
一:什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则. (在Python中)它内嵌在Python中,并通过 ...