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,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- Ocelot入门实践
博主是第一次写技术文档,一是对这两年工作以来的一些技术和经验进行整理,二也是希望能和大家多多分享交流,如有写的不对的地方望大家多多指正.进入正题 Ocelot 概念就不说了,大家自行百度,今天做一个O ...
- golang简单实现jwt验证(beego、xorm、jwt)
程序目录结构 简单实现,用户登录后返回一个jwt的token,下次请求带上token请求用户信息接口并返回信息. app.conf文件内容(可以用个beego直接读取里面的内容)写的是一个jwt的se ...
- CF1146H Satanic Panic
题目传送门 Description 给定二维平面内\(n\)个点\((n\leq 300)\),求能组成五角星(不要求正五角星)的五元组个数. Solution 一道小清新的寄蒜几盒计算几何题,代码不 ...
- cpu 亲和性 affinity
http://www.ibm.com/developerworks/cn/linux/l-affinity.html
- DES/3DES/AES区别
公元前400年,古希腊人发明了置换密码.1881年世界上的第一个电话保密专利出现.在第二次世界大战期间,德国军方启用“恩尼格玛”密码机,密码学在战争中起着非常重要的作用. DES 1977年1月,美国 ...
- 大脸猫讲逆向之ARM汇编中PC寄存器详解
i春秋作家:v4ever 近日,在研究一些开源native层hook方案的实现方式,并据此对ARM汇编层中容易出问题的一些地方做了整理,以便后来人能有从中有所收获并应用于现实问题中.当然,文中许多介绍 ...
- tomcat设置默认欢迎页、server.xml配置文件中的标签理解
一:要求:输入网址,不加文件名便可以访问默认页面 (1)项目中只有静态文件 方法:更改tomcat下的conf目录下的web.xml文件,如下图: <welcom-file-list>元素 ...
- the fist blood of java-eclipse 哈哈哈哈 封装的运用
class Student { private int id; public String name; public String sex; private int score ...
- odoo开发笔记--工作流
虽然odoo10里边取消了工作流 Odoo Workflow http://www.jeffzhang.cn/Odoo-Workflow-Notes/
- Centos 7 开启BBR
# 升级内核 rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org rpm -Uvh http://www.elrepo.org/elr ...