Jquery 基本动画
1.三组基本的动画
显示：show 、隐藏hide、滑入：slideUp、滑出：slideDown、滑入滑出切换：slideTpggle、淡入：fadeIn、淡出：fadeOut、淡入淡出切换：fadeToggle
1.1show([speed],[callback])
可选：speed-动画的持续时间，可以是毫秒，还可以是固定的字符串
可选：callback-回调函数，动画结束后执行
show()；不传任何参数 直接显示 最常用
show(1000)；传入1000 动画会在1秒内全部完成
show(1000,function(){alert("动画执行完毕")});
<style>
div{
width: 300px;
height: 300px;
background: pink;
display: none }
</style>
<body>
<div class="box"> </div> <script>
$(function(){
// $("div").show(); //直接显示div
// $("div").show(1000); //显示div会在1s内完成
$("div").show(1000,function(){
alert("动画执行完毕了");
}); //显示div会在1s内完成 随后会提示你动画执行完毕了
});
</script> </body>
1.2hide（[speed]，[callback]） 和show方法一样的参数效果
1.3 slideUp（隐藏）、slideDown（出现）和show方法一样的参数 （不传入参数的时候会默认为400ms 有滑动效果）slideToggle滑入滑出切换（效果一样的，只是会来回的切换）
1.4 fadeIn、fadeOut、fadeToggle：和slideUP...down一样的只是效果不一样。
Jquery 基本动画的更多相关文章
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- jQuery的动画处理总结
最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...
- jQuery实现动画过程中尽量避免出现网页滚动条
jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.
- jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining
一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...
- 精选7款绚丽的HTML5和jQuery图片动画特效
在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- jQuery 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...
- 放弃使用jQuery实现动画
在Web开发的圈子里,开发人员经常觉得CSS动画是一种高性能web动画技术.假设想让网页载入的更快一些,就应该用纯CSS动画.事实上这样的观点是错误的,非常多开发人员早就放弃了javascript的动 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- mooctest项目总结 【转载】
原文链接 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- 工作随笔——获取当前Java程序PID
小知识,记录下: JVM:1.8 // spring boot 中可以使用 String pid = ManagementFactory.getRuntimeMXBean().getSystemPro ...
- Winform相关
(1)C# WinForm程序退出的方法 1.this.Close(); 只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Applica ...
- 阿里云oss服务通用类
在webconfig中配置信息 <?xml version="1.0" encoding="utf-8"?><configuration> ...
- awk的匹配
关系运算符 含义 用法示例 < 小于 x < y > 大于 x > y
- java后端导入excel将数据写入数据库
参考:https://www.cnblogs.com/hanfeihanfei/p/7079210.html @RequestMapping("/importExcel.do") ...
- SpringMVC初探-HelloWorld
MVC的概念 MVC是一种设计模式,即Model--View-Controller,模型--视图--控制器 Model(模型)表示应用程序核心(比如数据库记录列表). View(视图)显示数据(数据库 ...
- odoo开发笔记-tree列表视图拖拽排序
odoo列表tree视图 拖拽排序 实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 &qu ...
- vue通过webpack打包后怎么运行
1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...
- JavaScript -- Select
-----053-Select.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...