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,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- 两台linux之间建立信任关系,实现免密码ssh远程登录或scp数据上传
两台linux之间建立信任关系,实现免密码远程登录或数据上传 1.执行ssh-keygen命令,生成建立安全信任关系的证书: linux1上:执行命令 ssh-keygen -t rsa 在程序提 ...
- Java虚拟机7:垃圾收集(GC)-2(并行和并发的区别)
1.并发编程下 这两个名词都是并发编程中的概念,在并发编程的模型下的定义: 并发:是在同一个cpu上同时(不是真正的同时,而是看来是同时,因为cpu要在多个程序间切换)运行多个程序. 并行:是多个或同 ...
- SQL注入之PHP-MySQL实现手工注入-字符型
SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序,将(恶意的)SQL命令注入到后台数据库引擎 ...
- 前端在js中获取用户所在地区的时间与时区
var times = Date() // 如果这种方式不行就使用 New Date() "Sat Jan 05 2019 10:35:24 GMT+0800 (中国标准时间)" ...
- 【小程序开放激励视频】--wepy小程序添加激励视频
小程序开放激励视频是对小程序开发者一个福音,小程序开发者可以完成一些变现,以增加收入! 本文章针对已经有开发经验或者正在进行小程序开发的同学~ 官方文档:激励视频广告 定义页面变量,用于创建视频实例 ...
- Shell - 简明Shell入门09 - 重定向(Redirection)
示例脚本及注释 #!/bin/bash pwd > 1.log # 输出重定向到指定文件 date 1> 1.log # ">"与"1>" ...
- ES6之Array.from()方法
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组. 那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象. 1.将类数组对象转换为真正数 ...
- 使用命令行工具npm新创建一个vue项目
使用vue开发项目的前期工作可以参考前面写的: Vue环境搭建及node安装过程整理 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的 ...
- Django 模版过滤器
模版常用过滤器 在模版中,有时候需要对一些数据进行处理以后才能使用.一般在Python中我们是通过函数的形式来完成的.而在模版中,则是通过过滤器来实现的.过滤器使用的是|来使用.比如使用add过滤器, ...
- Jenkins配置项目
前提:服务器上部署了jenkins+Tomcat,并且安装了所需插件 1.新建项目 -- 项目配置 2.配置git地址 出现上述错误是因为该git地址,在jenkins服务器上无权限访问.在git上开 ...