玩转Jquery中的动画效果(animate方法)

jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用;它把 <div> 元素移动到左边,直到 left 属性等于 250 像素为止:
实例
$("button").click(function(){
$("div").animate({left:'250px'});
}); 

提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

jQuery animate() - 操作多个属性
请注意,生成动画的过程中可同时使用多个属性:
实例
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
}); 

提示:可以用 animate() 方法来操作所有 CSS 属性吗?
是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
同时,色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。

jQuery animate() - 使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 = 或 -=:
实例
$("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 调用。
实例 1
隐藏,如果您希望在彼此之后执行不同的动画,那么我们要利用队列功能:
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

实例 2
下面的例子把 <div> 元素移动到右边,然后增加文本的字号:
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
最后来一个完整的例子
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script> 
</head>
<body>

<button>开始动画</button>
<p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367524.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab 等分矩阵,用matlab根据列拆分矩阵.

使用logical indexingBA(A(:,end)10,:);CA(A(:,end)2,:);回报>> BB 1 4 2 5 102 1 5 6 10>> CC 2 4 5 6 22 3 5 4 2编辑&#xff1a;在回复丹的评论这里是一般情况的扩展e unique(A(:,end));B cell(size(e));for k 1:numel(e)B{k} A(A(:,end)e(k),:);end或者更…

点击网页跟踪php代码的工具,使用ltrace工具跟踪PHP库函数调用的方法

本文实例讲述了使用ltrace工具跟踪PHP库函数调用的方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;可能大家已经很熟悉使用strace来跟踪系统调用&#xff0c;今天介绍一个跟踪库函数的利器ltrace比如我有这么一段PHP代码test.php&#xff1a;$y 1380;$arr array…

HDU 2841 Visible Trees(容斥)题解

题意&#xff1a;有一块&#xff08;1,1&#xff09;到&#xff08;m&#xff0c;n&#xff09;的地&#xff0c;从&#xff08;0&#xff0c;0&#xff09;看能看到几块&#xff08;如果两块地到看的地方三点一线&#xff0c;后面的地都看不到&#xff09;。 思路&#xff1a;…

Jquery获取服务器端控件ID的方法

<asp:textbox runat"server" id"txtMessage" textmode"SingleLine">some strings here...</asp:textbox>但是当这段代码输出到客户端时就变成了这样&#xff1a;<input name"ctl00$txtMessage" id"ctl00_txtMessa…

安全地创建和存储密码

几乎每次涉及用户配置文件时&#xff0c;都必须管理用户凭据&#xff0c;从而能够创建和存储用户密码。 通常应该使用散列密码和盐分密码来准备数据库公开和通过使用Rainbow表进行散列反转的密码。 但是&#xff0c;找到以明文形式存储的密码并不少见&#xff08;很不幸&#…

Swift Defer 延迟调用

1、Defer 在一些语言中&#xff0c;有 try/finally 这样的控制语句&#xff0c;比如 Java。这种语句可以让我们在 finally 代码块中执行必须要执行的代码&#xff0c;不管之前怎样的兴风作浪。在 Swift 2.0 中&#xff0c;Apple 提供了 defer 关键字&#xff0c;让我们可以实现…

mysql strtok,strtok()和strtok_r()

下面的说明摘自于最新的Linux内核2.6.29&#xff0c;说明了strtok()这个函数已经不再使用&#xff0c;由速度更快的strsep()代替/** linux/lib/string.c** Copyright (C) 1991, 1992 Linus Torvalds*//** stupid library routines.. The optimized versions should generally b…

from 下拉框多个值提交_Git commit 多行信息提交

git commit可接受多个消息标志(-m)来允许多行提交原文地址&#xff1a;https://www.stefanjudis.com/today-i-learned/git-commit-accepts-several-message-flags-m-to-allow-multiline-commits/原文作者&#xff1a;Stephan Schneider在命令行上使用git时&#xff0c;您可能已…

处理缓慢的资源泄漏

使用Java监视器查找资源泄漏 查找缓慢的资源泄漏是使应用程序服务器长时间保持正常运行的关键。 在这里&#xff0c;我解释了如何使用Java监视器来发现缓慢的资源泄漏&#xff0c;以及如何验证它们是实际的泄漏&#xff0c;而不仅仅是额外的预分配到某些HTTP连接器或数据库池中…

jquery简单实现点击弹出层效果实例

先看效果图&#xff1a;完整例子&#xff1a; <!-- 渐变弹出层 --><div id"race"><a href"#">点击</a></div><div id"racePop" class"raceShow">这里是弹出层效果</div> <script type&q…

Openfire源码阅读(一)

本篇先分析openfire源码的主要流程&#xff0c;模块细节后续再继续分析&#xff1b; 一、简介&#xff1a; Openfire是开源的实时协作服务器&#xff08;RTC&#xff09;&#xff0c;它是基于公开协议XMPP&#xff08;RFC-3920&#xff09;&#xff0c;并在此基础上实现了XMPP-…

常见的linux命令及其翻译

常见的linux指令 1、ls ll 查看文件信息 2、cd 切换工作目录 cd 或 cd ~ 切换到/home/用户目录 cd. 切换到当前目录 cd.. 切换到上级目录 cd- 切换入上次所在的目录 3、clear 或 ctrl l 清屏 4、pwd 显示当前路径 5、mkdir 创建目录 6、rm 删除文件 rm -r 删除文件夹 7、cp 拷…

php 查询方法all,获取多条:all静态方法

查询多条数据&#xff1a;all( )方法all方法与前节课学习的get方法都是静态方法&#xff0c;可用模型类直接访问2. 源码&#xff1a;/*** 查找所有记录* access public* param mixed $data 主键列表或者查询条件(闭包)* param array|string $with 关联预查询* param b…

Google GSON入门

在Java世界中&#xff0c;JSON已成为事实上的XML数据交换格式标准&#xff0c;因为它的易用性和传输效率高。 如果您不了解JSON&#xff0c;那就是Javascript对象表示法&#xff0c;这是一种基于文本的数据交换格式&#xff0c;是名称-值的集合&#xff0c;其中名称严格是字符…

[译文]过犹不及,别再在编程中高射炮打蚊子

原文链接&#xff1a;Anyway,stop recommending bazookas to kill flies in programming. 众成翻译地址&#xff1a;过犹不及&#xff0c;别再在编程中高射炮打蚊子 译者注&#xff1a;翻译这篇吐槽的文章&#xff0c;主要是为了自省~日常工作中确实会犯类似的错误&#xff0…

Java中的for循环

上一章呢我们学习了一下java中的while循环和do while循环 现在我们来了解一下另外一种循环 for循环 for循环是编程语言中一种开界的循环语句&#xff0c;而循环语句 由循环体及循环的终止条件两部分组成&#xff0c;for循环其在各种编程语言中的实现与表达有所出入&#xff0…

SpringFox swagger2 and SpringFox swagger2 UI 接口文档生成与查看

依赖&#xff1a; <!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger2 --> <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version> <…

matlab期末复习资料,MATLAB期末复习习题及答案

MATLAB期末复习习题及答案13&#xff0c; ysin(x)&#xff0c;x从0到2 &#xff0c; x0.02 &#xff0c;求y的最大值、最小值、均值和标准差。(应用max,min,mean,std) 14&#xff0c; 参照课件中例题的方法&#xff0c;计算表达式z 10x3 y5e xcontour, hold on, quiver)15&…

多核可扩展计数器

到处都需要计数器&#xff0c;例如&#xff0c;查找应用程序的关键KPI&#xff0c;应用程序的负载&#xff0c;服务的请求总数&#xff0c;用于查找应用程序吞吐量的一些KPI等。 由于所有这些需求&#xff0c;并发复杂性也增加了&#xff0c;这使这个问题变得有趣。 如何实现…

三年前端,面试思考(二)

为什么还有&#xff08;二&#xff09; 没有想到上一篇 《三年前端&#xff0c;面试思考》 有这么多前端同学看到。 在评论区也有很多鼓励和质疑的声音&#xff0c;而且群里面交流的同学两天就达到了700人。 群里有同学问了很多问题&#xff0c;同时希望我再分享一些面试技巧…