jquery中的三组基础动画以及自定义动画

Jquery基础三组动画

1.show(),hide(),toggle() 改变宽高透明度

2.fadeIn(),fadeout(), fadeToggle() 改变透明度(淡入,淡出效果)

3.slideDown(),slideUp(),slideToggle() 改变高度

语法: show(time,callback) time时间,单位是毫秒 回调函数,当动画执行完成后执行

自定义动画 animate

参数1:比传参数 ,样式对象

参数2:动画时间,默认 400ms (fast,normal,slow)

参数3:动画效果 swing 默认值 缓动,秋千; linear 匀速

参数4: 回调函数:动画完成后执行

Animate({left:0},500,’linear’,function() {…});

动画队列

Jquery为了保证动画都执行,会将动画添加到当前元素的队列中去,一次执行

好处:方便复杂动画的执行

缺点: 操作听了,动画还在执行:用stop()可以解决

Stop()方法:停止当前正在执行的动画

参数1; 是否清空动画队列 false默认  true

参数2: 是否立刻到达当前动画的最终状态 false 默认   true

常见用法: sop()停止当前正在进行的动画

Stop(true) 停止当前正在进行的动画,并清空对列

原文地址:https://www.cnblogs.com/z-lin/p/11106120.html

时间: 2024-12-08 09:49:56

jquery中的三组基础动画以及自定义动画的相关文章

jQuery-4.动画篇---自定义动画

jQuery中动画animate(上) 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就需要强大的animate方法了 操作一个元素执行3秒的淡入动画,对比一下2组动画设置的区别 $(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000) 显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画 语法: .animate( properties ,[ duration ], [ easing ], [ com

JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画

1 /** 2 * [JQ基础动画] 3 * show() 显示 4 * hide() 隐藏 5 * toggle() 切换 6 * 默认无动画,如果要产生动画 7 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 8 * 9 * <滑动动画> 10 * slideDown() 滑动显示(下) 11 * slideUp() 滑动隐藏(上) 12 * slideToggle 滑动切换 13 * 默认有动画,默认是400毫秒 14 * <淡入淡出动画> 15 * fadeIn()

(原)Unreal源码搬山-动画篇 自定义动画节点(一)

@author:黑袍小道 太忙了,来更新下,嘿嘿 前言: 本文是接着上文 Unreal搬山之动画模块_Unreal动画流程和框架,进行简单入门如何自定义动画图标的AnimNode. 正文: 一.AnimNode Unreal 4的AnimNode负责的骨骼动画的单项计算,最后汇总到AnimGraph有,然后交付给AnimInstance统一收集和处理. 下图未AnimNode相关的结构 二.CustomAnimNode 该例子实现修改指定的一系列骨骼,并再AnimGraphy预览和编辑 三.Un

关于jQuery中,animate、slide、fade等动画的连续触发、滞后反复执行的bug的个人解决办法

照例,现在开头讲个这个问题发生的背景吧: 因为最近要做个操作选项的呼出,然后就想到了用默认隐藏,鼠标划过的时候显示的方法. 刚开始打算添加一个class="active",直接触发mouseover(或者mouseenter)的时候add,mouseout(或者mouseleave)的时候remove,这个解决方法很简单,也很实用,但是体验上可能不是那么酷炫(好吧,这个词用的,瞬间感觉好low啊),所以就想到了用animate或者slide这些jQuery的动画,然后一开始讲真,这个插

jQuery中的事件与动画 (你的明天Via Via)

众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, 通过种种事件实现各项功能或执行某项操作.事件在元素对象与功能代码中起着重要的桥梁作用. 在jQuery中,事件总体分为两大类:简单事件和复合事件. jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件.鼠标事件.键盘事件.表单事件等, 只是其对应的方法名称有略微不

锋利的jQuery读书笔记---jQuery中动画

jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">

【学习笔记】jQuery中的动画与效果

1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次 slow=600毫秒  normal=400毫秒  fast=200毫秒 以优雅的动画隐藏所

jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function(){   // 编写代码... }); $(document).ready()方法的执行时机是在网页中所有DOM结构绘制完毕后就执行,可能此时DOM元素关联的东西(比如图片)并没有加载完. $(document).ready()方法能同时编写多个,每次调用$(document).ready()方法都

五、jQuery中的动画

通过jQuery的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验. 一.show()方法和hide()方法 1.show()方法和hide()方法 show()方法和hide()方法是jQuery中最基本的动画方法.在HTML文档里,为一个元素调用hide()方法,会将该元素的display样式改为none. 隐藏元素: $("element").hide();  //通过hide()方法隐藏元素 也可以通过css方法设置display属性 $("el