jquery总结06-动画事件04-自定义动画
.animate(params,[speed],[easing],[fn])
params,[speed],[easing],[fn]Options,Number/String,String,FunctionV1.0
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数,每个元素执行一次。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
$aaron.animate({
height: '50'
}, {
duration :2000,
//每一个动画都会调用
step: function(now, fx) {
$aaron.text('高度的改变值:'+now)
}
})
.stop( [clearQueue ], [ jumpToEnd ] )
.stop(); 停止当前动画,点击在暂停处继续开始
.stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
.stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值
- stop():只会停止第一个动画,第二个第三个继续
- stop(true):停止第一个、第二个和第三个动画
- stop(true ture):停止动画,直接跳到第一个动画的最终状态
jquery总结06-动画事件04-自定义动画的更多相关文章
- UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法
基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...
- jQuery中关于如何使用animate自定义动画
动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一 ...
- jquery鼠标键盘悬停事件,形变动画和淡入淡出
鼠标和键盘悬停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Android 动画效果 及 自定义动画
1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...
- jquery总结06-动画事件01-基础显示和隐藏
动画事件 .hide(option) 动画隐藏 会保存元素的原始属性值 $("#a2").hide({ duration: 3000, complete: function() ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- 【学习笔记】锋利的jQuery(三)事件和动画
一.jQuery事件 1,加载事件 $(document).ready(function(){...}) //等同于$(function(){..}) $(window).load(function( ...
- jQuery里面的常用的事件和基础动画的实现
一:了解jquery里面常用的事件 二:了解基础动画的实现 1:加载DOM 在JavaScript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行) 在jQu ...
- python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax
一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...
随机推荐
- MICAPS数据文件格式
MICAPS系统的数据结构是建立在文件系统基础上的.其特点是: l 利用目录来区分不同的数据来源.要素和层次,即不同的数据来源.要素和层次的数据要放在不同的目录中.同一目录中的数据只能有时次或时效上 ...
- 0-js判断电脑或手机登录
<script type="text/javascript"> try{ if(/Android|webOS|iPhone|iPod|BlackBerry/i.test ...
- hdu5713 K个联通块[2016百度之星复赛B题]
dp 代码 #include<cstdio> ; ; int n,m,k,cnt[N]; ]; ][],i,j,l,a,b; int check(int x,int y) { int i; ...
- jffs2和yaffs2文件系统制作工具的编译与使用
一 . 先准备文件 mtd-utils-1.4.5.tar.bz2 ftp://ftp.infradead.org/pub/mtd-utils/ zlib-1.2.5.tar.bz2 http://z ...
- 字符串反转----将this is good 转化为good is this 输出。
思路:现将整个字符串反转,再将每个单词反转: #include "iostream" #include "cstring" using namespace st ...
- Ubuntu14.04安装CMake3.6.3
准备工作:官网下载cmake-3.6.3.tar.gz(https://cmake.org/download/) 1.解压文件tar -xvf cmake-3.6.3.tar.gz,并修改文件权限ch ...
- 【《zw版·Halcon与delphi系列原创教程》 zw_halcon人脸识别
[<zw版·Halcon与delphi系列原创教程>zw_halcon人脸识别 经常有用户问,halcon人脸识别方面的问题. 可能是cv在人脸识别.车牌识别方面的投入太多了. 其实,人脸 ...
- MATLAB绘图
matlab绘制散点图 clc,clear x=[11.9,11.5,14.5,15.2,15.9,16.3,14.6,12.9,15.8,14.1]; y=[196.84,196.84,197.14 ...
- jquery checkbox 实现单选
最近在用javascript的时候发现网上实现checkbox单选的代码都已经过时了. 用着几年前的代码发现根本不行了 原因是jquery api已经更改 http://api.jquery.com/ ...
- ajax 跨域请求
1. $.ajax({ type: "get", async: false, url: "http://61.160.194.208:8383/Api/login?acc ...