<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height:'200px', width:'300px'},5000)
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
}); $("#stop").click(function(){
$("div").stop();
}); $("#stop2").click(function(){
$("div").stop(true);
}); $("#stop3").click(function(){
$("div").stop(true,true);
}); });
</script>
</head>
<body> <button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画,但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画,然后停下来。</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body>
</html>

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。

如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

提示:可以用 animate() 方法来操作所有 CSS 属性吗?

是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。

同时,色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。

也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

实例

 $("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

jQuery animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":

 $("button").click(function(){
$("div").animate({
height:'toggle'
});
});

jQuery animate() - 使用队列功能

默认地,jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

jQuery 方法链接

直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。

不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。

提示:这样的话,浏览器就不必多次查找相同的元素。

如需链接一个动作,您只需简单地把该动作追加到之前的动作上。

下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,然后向下滑动:

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery 自定义动画效果的更多相关文章

  1. jQuery Easing动画效果扩展(转)

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  2. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  3. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  4. jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

  5. 第一百七十二节,jQuery,动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...

  6. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  7. jquery-12 jquery常用动画效果有哪些

    jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...

  8. AndroidUI 视图动画-自定义动画效果 (Animation)

    如果Android提供的四种动画 效果 和混合动画效果 不能够 满足需求的话,可以使用自定义动画效果 : 新建一个类CustomAnimation 使其继承自 android.view.animati ...

  9. 用POP动画编写带富文本的自定义动画效果

    用POP动画编写带富文本的自定义动画效果 [源码] https://github.com/YouXianMing/UI-Component-Collection [效果] [特点] * 支持富文本 * ...

随机推荐

  1. GAN生成图像论文总结

    GAN Theory Modifyingthe Optimization of GAN 题目 内容 GAN   DCGAN   WGAN   Least-square GAN   Loss Sensi ...

  2. Java_数组1_16.5.12

    声明整型数组a: int[] a; 这时,只声明了变量a,还应该使用new运算符创建数组: int[] a=new int [100];(数组长度不要求是一个常量:new int[n]会创建一个长度为 ...

  3. C++ Error C2662 cannot convert 'this' pointer from 'const *'

    ---恢复内容开始--- 这个错误在于一点:常量对象只能调用常量成员(函数\变量),不能调用非常量成员.另一方面,非常量对象,既可以调用常量成员,又可以调用非常量成员. class A { publi ...

  4. Python学习笔记(3)动态类型

    is运算符 ==是值相等而is必须是相同的引用才可以 l=[1,2,3] m=[1,2,3] print(l==m) # True print(l is m) # False sys模块 getref ...

  5. zabbix+docker

    由于公司线上服务器数量太少,又要用于生产,领导让上zabbix,但熟知zabbix搭建需要LAMP或者LNMP,如果和生产服务器混搭的话,不方便管理,也怕出问题,所以就先使用docker方式搭建管理. ...

  6. Centos7二进制文件安装MySQL5.7.25

    1.删除centos系统自带的mariadb数据库防止发生冲突 rpm -qa|grep mariadb rpm -e mariadb-libs --nodeps 2.安装libaio库 yum -y ...

  7. Effective C++ 一些记录和思考

    Effective C++ Iter 3 - 尽可能使用 const 一个反逻辑的 bitwise const class Text { ... char& operator[](std::s ...

  8. pandas文本处理

    import pandas as pd import numpy as np s = pd.Series([', np.nan, 'hj']) df = pd.DataFrame({'key1': l ...

  9. 关于字符串不为空 错误:s!=null

    错误:s!=null 正确:StringUtils.isNotBlank(s); public static boolean isBlank(CharSequence cs) { int strLen ...

  10. 九度oj 题目1046:求最大值

    题目1046:求最大值 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:11782 解决:4789 题目描述: 输入10个数,要求输出其中的最大值. 输入: 测试数据有多组,每组10个数. ...