前端jQuery之动画操作及相关演示
1.显示动画
1.1无参数，直接让指定的元素显示出来
$("div").show();
1.2通过控制宽高，透明度，display属性逐渐显示，指定时间现实完毕
$('div').show(3000);
1.3特定参数类型
$("div").show("slow");
参数:
slow:600ms
normal:400ms
fast:200ms
1.4动画执行完毕，立即执行回调函数
//show(毫秒值，回调函数;
$("div").show(5000,function () {
alert("动画执行完毕！");
});
2.隐藏动画
代码和显示动画类似
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});
3.开关显示隐藏动画
$('#box').toggle(3000,function(){});
4.滑入和滑出动画效果
滑入，这里默认值是400ms
$(selector).slideDown(speed, 回调函数);
滑出
$(selector).slideUp(speed, 回调函数);
滑入滑出切换动画效果
$(selector).slideToggle(speed, 回调函数);
5.淡入淡出动画效果
淡入效果
$(selector).fadeIn(speed, callback);
淡出效果
$(selector).fadeOut(1000);
淡入淡出效果
$(selector).fadeToggle('fast', callback);
6.自定义动画
可以执行一组css属性的自定义动画
$(selector).animate({params}, speed, callback);
第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，立即执行的回调函数（可选）
7.停止动画
$(selector).stop(true, false);
代码含义
第一个参数： true：后续动画不执行。 false：后续动画会执行。 第二个参数： true：立即执行完成当前动画。 false：立即停止当前动画。
代码演示
自定义动画：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
jQuery(function () {
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
}; //自定义动画
$("div").animate(json, 1000, function () {
$("div").animate(json2, 1000, function () {
alert("动画执行完毕！");
});
}); })
})
</script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>
停止动画效果（很经典的一个案例）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
} .wrap li {
background-color: green;
} .wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
} .wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
} .wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
//入口函数
$(document).ready(function () {
//需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
var jqli = $(".wrap>ul>li"); //绑定事件
jqli.mouseenter(function () {
$(this).children("ul").stop().slideDown(1000);
}); //绑定事件(移开隐藏)
jqli.mouseleave(function () {
$(this).children("ul").stop().slideUp(1000);
});
});
</script> </head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">二级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">三级菜单1</a>
<ul>
<li><a href="javascript:void(0);">三级菜单2</a></li>
<li><a href="javascript:void(0);">三级菜单3</a></li>
<li><a href="javascript:void(0);">三级菜单4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
动画潜入浅出效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="qiehuan">切换</button> <div class="box"> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// $('.box').css('display','block');
$('#show').click(function(){
$('.box').show(3000);
});
});
$('#hide').click(function(){
$('.box').hide(3000);
});
$('#qiehuan').click(function(){
$('.box').toggle(3000);
}) </script> </body>
</html>
动画卷帘门效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: green;
display: none;
}
</style>
</head>
<body>
<button id="show">滑入</button>
<button id="hide">滑出</button>
<button id="qiehuan">切换</button> <div class="box"> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript"> $(function(){ $('#show').click(function(){
$('.box').slideDown(1000);
});
$('#hide').click(function(){
$('.box').slideUp(1000);
});
$('#qiehuan').click(function(){
$('.box').slideToggle(1000);
})
})
</script> </body>
</html>
前端jQuery之动画操作及相关演示的更多相关文章
- 前端 ----关于DOM的操作的相关实例
关于DOM操作的相关案例 1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE ...
- 前端 ----jQuery的属性操作
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...
- jQuery基础--动画操作
三组基本动画 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...
- 前端 ----jQuery的文件操作
06-jQuery的文档操作*** 之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作.通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果.那么jQuery的 ...
- 前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画 方式一: $("div" ...
- 前端jQuery之属性操作
属性操作主要分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 HTML属性操作:属性的读取,设置,以及移除,如attr().removeAttr() DOM属性操作:属性的读取,设置 ...
- JQuery常用属性操作，动画，事件绑定
jQuery 的属性操作 html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样. text() 它可以设置和获取起始标签和 ...
- Jquery基础之动画操作
Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show() ...
- jQuery的一些基本的函数和用jQuery做一些动画操作
jQuery是对js的封装,因为js有一些不方便的地方.所以,jQuery才会去对js进行封装. jQuery对于标签元素的获取 $('div')或$('li') <!DOCTYPE html& ...
随机推荐
- 笔记-spring aop 原理学习2
InstantiationAwareBeanPostProcessor AnnotationAwareAspectJAutoProxyCreator https://blog.csdn.net/qq_ ...
- android Binder机制(一)架构设计
Binder 架构设计 Binder 被设计出来是解决 Android IPC(进程间通信) 问题的.Binder 将两个进程间交互的理解为 Client 向 Server 进行通信. 如下:bind ...
- python 获取当前时间及前一天时间
import datetime from pandas.tseries.offsets import Day now_time =datetime.datetime.now()#获取当前时间 yes_ ...
- 性能测试工具LoadRunner10-LR之Virtual User Generator 错误处理函数
VuGen提供了错误处理函数lr_continue_on_error,用来在脚本中实时修改Vuser的出错设置.lr_continue_on_error函数语法结构如下: void lr_contin ...
- [转]完美的背景图全屏css代码 – background-size:cover?
写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...
- 基于表单布局：分析过时的table结构与当下的div结构
一些话在前面 最近做了百度前端学院一个小任务,其中涉及到表单布局的问题, 它要处理的布局问题:左边的标签要右对齐,右边的输入框.单选按钮等要实现左对齐. 从开始入门就被告知table布局已经过时了,当 ...
- 将pugixml库编译成动态库的做法
作者:朱金灿 来源:http://blog.csdn.net/clever101 pugixml库默认是编译成静态库的.要把pugixml库编译成一个动态库,需要对代码做一些修改,具体是将 // If ...
- （C#) 线程之 AutoResetEvent, EventHandle.
AutoResetEvent 允许线程通过发信号互相通信.通常,此通信涉及线程需要独占访问的资源. 线程通过调用 AutoResetEvent 上的 WaitOne 来等待信号.如果 AutoRese ...
- Android 实现朋友圈有图片和视频
最近开发比较烦,这个作为我第一篇博客吧. 效果就是图上的样子. 首先是布局文件,没什么就是一个RecycleView <android.support.v7.widget.RecyclerVie ...
- Lua相关函数整理
1.asset(a==b,tipmsg);错误处理 2.pcall,xpcall,debug,保护函数执行,并且查看相关信息 3.collectgarbage()函数相关: collectgarbag ...