`
sungang_1120
  • 浏览: 323751 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

jQuery1.9(动画效果)学习之—— .animate( properties [, duration ] [, easing ] [, complete

阅读更多

 

描述: 根据一组 CSS 属性,执行自定义动画。

 

.animate( properties [, duration ] [, easing ] [, complete ] )

 

  • properties
    类型: PlainObject
    一个CSS属性和值的对象,动画将根据这组对象移动。
  • duration (默认: 400)
    类型: Number or String
    一个字符串或者数字决定动画将运行多久。(愚人码头注:默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如:1000) )
  • easing (默认: swing)
    类型: String
    一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing")
  • complete
    类型: Function()
    在动画完成时执行的函数。

 

.animate( properties, options )

 

  • properties
    类型: PlainObject
    一个CSS属性和值的对象,动画将根据这组对象移动。
  • options
    类型: PlainObject
    一组包含动画选项的值的集合。 支持的选项:
    • duration (default: 400)
      Type: Number or String
      一个字符串或者数字决定动画将运行多久。(愚人码头注:默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如:1000) )
    • easing (default: swing)
      Type: String
      一个字符串,表示过渡使用哪种缓动函数。(愚人码头注:jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing Plugin插件)
    • queue (default: true)
      Type: Boolean or String
      一个布尔值,指示是否将动画放置在效果队列中。如果为false时,将立即开始动画。 从jQuery1.7开始,队列选项也可以接受一个字符串,在这种情况下,在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用,动画不会自动启动;你必须调用.dequeue("queuename")来启动它。
    • specialEasing
      由此方法的第一个参数properties定义的一个或多个CSS属性,及其相应的缓动函数组成的键值对map。( 1.4 新增)
    • step
      Type: Function( Number now, Tween tween )
      每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
    • progress
      Type: Function( Promise animation, Number progress, Number remainingMs )
      每一步动画完成后调用的一个函数,无论动画属性有多少,每个动画元素都执行单独的函数。 (version added: 1.8)
    • complete
      Type: Function()
      在动画完成时执行的函数。
    • done
      Type: Function( Promise animation, Boolean jumpedToEnd )
      在动画完成时执行的函数。 (他的Promise对象状态已完成). (version added: 1.8)
    • fail
      Type: Function( Promise animation, Boolean jumpedToEnd )
      动画失败完成时执行的函数。(他的Promise对象状态未完成)。 (version added: 1.8)
    • always
      Type: Function( Promise animation, Boolean jumpedToEnd )
      在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。 (version added: 1.8)

     

.animate()方法允许我们在任意的数值的CSS属性上创建动画。唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似,除了属性范围做了更多限制。

 

Animation Properties and Values(动画属性和值)

所有用于动画的属性必须是数字的,除非另有说明;这些属性如果不是数字的将不能使用基本的jQuery功能。(例如,width, height或者left可以执行动画,但是background-color不能,除非使用jQuery.Color()插件。)属性值的单位像素(px),除非另有说明。单位em%需要指定使用。

 

除了样式属性, 一些非样式的属性,如scrollTopscrollLeft,以及自定义属性,也可应用于动画。

 

CSS简写属性(例如font, background, border)没有得到充分的支持。例如, 如果你想边框宽度做动画呈现,至少边框样式和边框宽度必须预先设定不为"auto" 。或者,如果你想字体大小做动画, 你可以使用fontSize的或相当于CSS的 'font-size' ,而不是简单的'font'

 

除了定义数值,每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏。为了使用jQuery内置的切换状态跟踪,'toggle'关键字必须在动画开始前给定属性值。(愚人码头注:jquery中有两个.toggle()方法,一个是显示或隐藏匹配元素。另一个是绑定两个或多个处理程序绑定到匹配的元素,用来执行在交替的点击。哪一个被调用取决于传递的参数的设置。所以这里'toggle'关键字必须在动画开始前给定属性值,以确认调用哪个'toggle'方法。)

动画属性也可以是一个相对值。如果提供一个以+=-=开始的值,那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的。

 

注意: 不同于动画的简便方法,比如.slideDown().fadeIn(),.animate()方法不会影响隐藏元素的可见性部分的效果。例如,给定$('someElement').hide().animate({height:'20px'}, 500),动画将执行,但该元素将保持隐藏

 

 

Duration(持续时间)

持续时间是以毫秒为单位的;值越大表示动画执行的越慢,不是越快。还可以提供'fast''slow'字符串,分别表示持续时间为200600毫秒。

 

Complete Function(完成函数)

如果提供complete回调函数将在动画完成后被执行一次。这对于按顺序执行一系列不同动画时,特别有用。这个回调函数不设置任何参数,但是this会被传递到正在执行动画的DOM元素上,如果多个元素一起做动画效果,值得注意的是这个回调函数在每个匹配元素上执行一次,不是这个动画作为一个整体

 

Basic Usage(基本用法)

我们可以为任何元素做动画,比如这样的一个简单图片:

<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
style="position: relative; left: 10px;" />

 同时对透明度,左偏移值和高度应用动画:

$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});

 

注意我们这里给定了toggle作为height属性的目标值。由于这个图片开始是可见的,这个动画将收缩高度至0隐藏这个图片。第二次点击的时候将相反的转变:

 

这个图片的opacity已经是其目标值了,所以这个属性在第二次点击的时候不会有动画效果。由于我们给定了left目标值作为相对值,在第二次动画中图片将向右移动得更远。

 

如果元素的定位属性是静态的,即 position样式属性是static默认值,那么他们的定位属性(top, right, bottom, left)没有明显的效果。

 

注意: jQuery UI项目扩展了.animate()方法,允许一些非数值的样式,比如颜色,应用动画。该项目还包括通过CSS classes来指定动画的机制而不是单独的属性。

注意: 如果试图将元素高度或宽度动画至 0px,元素的内容是可见的,可能在动画中溢出。通过固定原始元素的尺寸,隐藏内容解决。这样可以确保动画平稳运行。一个clearfix 可以用来自动修复您的主要元素的尺寸,而无需手动设置。

 

 

 

Step Function

第二个版本的.animate()提供了一个step选项- 每步动画执行后调用的回调函数。启用自定义动画类型或改变正在执行的动画,此功能是非常有用。它接受两个参数(nowfx),this是当前正在执行动画的DOM元素集合。

  • now: 每一步动画属性的数字值
  • fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如elem 表示前正在执行动画的元素,startend分别为动画属性的第一个和最后一个的值,prop为进行中的动画属性。

需要注意的是step函数被每个动画元素的每个动画属性调用。例如,给定两个列表项,step函数会被激发四次:

$('li').animate({
opacity: .5,
height: '50%'
},
{
step: function(now, fx) {
var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
$('body').append('<div>' + data + '</div>');
}
});

 

Easing(缓动)

.animate()还有一个参数是一个字符串命名的使用缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。 在jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画,请调用 linear. 更多的缓动函数要使用的插件,最显着的是jQuery UI suite(译者注:或jQuery Easing Plugin插件)。

 

Per-property Easing

从jQuery 1.4 版本开始,我们能设置per-property 缓存函数访问一个单独的.animate()。在.animate()的第一个版本中,每个属性能获取一个数组作为他的值:数组的第一个成员是CSS属性,第二成员缓冲函数。如果为某个属性指定的缓冲函数尚未被定义,那么将会使用.animate() 方法的 easing 参数来代替。如果 easing 参数也未被定义,那么将会使用默认的缓冲函数 swing

 

例如, 我们可以同时的使用swing缓冲函数来做width 和 height动画,并且用linear缓冲函数来做opacity动画:

$('#clickme').click(function() {
$('#book').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 5000, 'linear', function() {
$(this).after('<div>Animation complete.</div>');
});
});

 在.animate()的第二个版本中,选项对象能包含specialEasing属性,该属性本身是一组CSS属性与相应的缓冲函数。例如,我们可以同时的使用linear缓冲函数来做width动画,并且用easeOutBounce缓冲函数来做height动画:

$('#clickme').click(function() {
$('#book').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
});

  如前所述,easeOutBounce 函数是一个极其必要的插件。

 

Additional Notes:(其他注意事项:)

  • 所有的jQuery效果,包括.animate(),能使用jQuery.fx.off = true来全局性关闭。更多信息请查看jQuery.fx.off.

 

 

例子:

Example: 点击按钮,根据指定的一系列属性,在 div 上应用动画。

 

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">&raquo; Run</button>
<div id="block">Hello!</div>
<script>
/* Using multiple unit types within one animation. */
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
</script>
</body>
</html>

 

 

Example: 对 div 应用动画,在 left 属性上使用相对值。执行动画多次,查看相对值的累加效果。

<!DOCTYPE html>
<html>
<head>
<style>
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
</script>
</body>
</html>

 

Example: 第一个按钮要执行的动画中,使用了 queue: false 选项,该动画使元素的宽度扩大到了总宽 90%,并且 文字大小也变大了。一旦字体大小改变完了,边框的动画就会开始。 第二个按钮要执行的动画中,包含了一系列动画,当前一个动画完成时,后一个动画就会开始。

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go1">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>
<button id="go4">&raquo; Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>
$( "#go1" ).click(function(){
$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});
$( "#go2" ).click(function(){
$( "#block2" ).animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});
$( "#go3" ).click(function(){
$( "#go1" ).add( "#go2" ).click();
});
$( "#go4" ).click(function(){
$( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});
</script>
</body>
</html>

 

Example: 对第一个 div 的 left 属性应用动画,在动画执行的过程中,在 step 函数中改变其余 div 的 left 属性。

<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button id="go">Run »</button></p>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<script>
$( "#go" ).click(function(){
$( ".block:first" ).animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
}
});
});
</script>
</body>
</html>

 

Example: 对所有段落的高和透明度使用 toggle 动画,用时 600 毫秒。

$( "p" ).animate({
height: "toggle", opacity: "toggle"
}, "slow" );

 

Example: 对所有段落应用动画,使其 left 属性变为 50,透明度变为 1(即,不透明,可见),用时 500 毫秒。

$( "p" ).animate({
left: 50, opacity: 1
}, 500 );

 

Example: Animate the left and opacity style properties of all paragraphs; run the animation outside the queue, so that it will automatically start without waiting for its turn.

$( "p" ).animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });

 

Example: 一个使用 'easing' 缓冲函数的例子,只要当你提供的插件中包含 easing 函数即可。注意,以下代码只能在处于隐藏的元素上才会看出效果。

$( "p" ).animate({
opacity: "show"
}, "slow", "easein" );

 

Example: 对所有段落的高和透明度使用 toggle 动画,用时 600 毫秒。

$( "p" ).animate({
height: "toggle", opacity: "toggle"
}, { duration: "slow" });

 

Example: 一个使用 'easing' 缓冲函数的例子,只要当你提供的插件中包含 easing 函数即可。

$( "p" ).animate({
opacity: "show"
}, { duration: "slow", easing: "easein" });

 

Example: 一个使用回调函数的例子。第一个参数是一个 CSS 属性数组,第二个参数表示动画耗时 1000 毫秒,第三个参数说明使用的是 easing 缓冲效果, 第四个参数是一个匿名的回调函数。

$( "p" ).animate({
height: 200, width: 400, opacity: 0.5
}, 1000, "linear", function() {
alert("all done");
});

 

分享到:
评论

相关推荐

    基于智能温度监测系统设计.doc

    基于智能温度监测系统设计.doc

    搜广推推荐系统中传统推荐系统方法思维导图整理-完整版

    包括userCF,itemCF,MF,LR,POLY2,FM,FFM,GBDT+LR,阿里LS-PLM 基于深度学习推荐系统(王喆)

    2023-04-06-项目笔记 - 第三百五十五阶段 - 4.4.2.353全局变量的作用域-353 -2025.12.22

    2023-04-06-项目笔记-第三百五十五阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.353局变量的作用域_353- 2024-12-22

    和美乡村城乡融合发展数字化解决方案.docx

    和美乡村城乡融合发展数字化解决方案.docx

    CNN基于Python的深度学习图像识别系统

    基于Python的深度学习图像识别系统是一个利用卷积神经网络(CNN)对图像进行分类的先进项目。该项目使用Python的深度学习库,如TensorFlow,构建和训练一个模型,能够自动识别和分类图像中的对象。系统特别适合于图像处理领域的研究和实践,如计算机视觉、自动驾驶、医疗影像分析等。 项目的核心功能包括数据预处理、模型构建、训练、评估和预测。用户可以上传自己的图像或使用预定义的数据集进行训练。系统提供了一个直观的界面,允许用户监控训练进度,并可视化模型的性能。此外,系统还包括了一个模型优化模块,通过调整超参数和网络结构来提高识别准确率。 技术层面上,该项目使用了Python编程语言,并集成了多个流行的机器学习库,如NumPy、Pandas、Matplotlib等,用于数据处理和可视化。模型训练过程中,系统会保存训练好的权重,以便后续进行模型评估和预测。用户可以通过简单的API调用,将新的图像输入到训练好的模型中,获取预测结果。

    拳皇97.exe拳皇972.exe拳皇973.exe

    拳皇97.exe拳皇972.exe拳皇973.exe

    基于python和协同过滤算法的电影推荐系统

    基于python和协同过滤算法的电影推荐系统 基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法

    DEV-CPP-RED-PANDA

    DEV-CPP-RED-PANDA

    Python语言求解旅行商(TSP)问题,算法包括禁忌搜索、蚁群算法、模拟退火算法等

    Python语言求解旅行商问题,算法包括禁忌搜索、蚁群算法、模拟退火算法等。

    pdfjs2.5.207和4.9.155

    pdfjs 用于在浏览器中查看/预览/打印pdf。 pdfjs 2.5.207 支持firefox/chrome/edge/ie11以上版本。 如果需要支持旧版本浏览器,可以使用这个,是未修改过的原版,支持打印和下载按钮。亲测有效。 pdf 4.9.155分两个包: pdfjs-4.9.155-dist.zip pdfjs-4.9.155-legacy-dist.zip

    建设项目现场高温人员中暑事故应急预案.docx

    建设项目现场高温人员中暑事故应急预案

    数据结构上机实验大作业-线性表选题.zip

    数据结构上机实验大作业-线性表选题.zip

    基于高德地图的校园导航全部资料+详细文档+高分项目.zip

    【资源说明】 基于高德地图的校园导航全部资料+详细文档+高分项目.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    全自动批量建站快速养权重站系统【纯静态html站群版】:(GPT4.0自动根据关键词写文章+自动发布+自定义友链+自动文章内链+20%页面加提权词)

    【静态站群程序视频演示,只有视频,不含程序,下载须知】【静态站群程序视频演示,只有视频,不含程序,下载须知】全自动批量建站快速养权重站系统【纯静态html站群版】:(GPT4.0自动根据关键词写文章+自动发布+自定义友链+自动文章内链+20%页面加提权词)

    9.30 SWKJ 男头7张+女头2张.zip

    9.30 SWKJ 男头7张+女头2张.zip

    基于java+springboot+vue+mysql的技术交流和分享平台 源码+数据库+论文(高分毕业设计).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea、vscode 数据库:MySql5.7以上 部署环境:maven 数据库工具:navicat

    一个通过单片机在各种屏幕上显示中文的解决方案.7z

    一个通过单片机在各种屏幕上显示中文的解决方案.7z

    Halcon模板匹配图像包

    图像

    线上辅导班系统-JAVA-基于springboot的线上辅导班系统的开发与设计(毕业论文)

    一、用户管理功能 用户注册与登录 学生注册:学生可以通过手机号、邮箱、社交账号等方式注册,填写个人信息(如姓名、年龄、学校等)。 家长/监护人账户:支持家长/监护人注册并管理学生账户,查看学习进度和成绩。 教师账户:教师可以注册并设置个人资料,上传资质认证文件。 管理员账户:管理员负责整个系统的管理,包括用户管理、课程管理、平台设置等。 用户权限管理 角色权限:系统根据用户类型(学生、家长、教师、管理员)分配不同权限,确保信息安全。 家长监督:家长可以查看子女的学习进度、成绩和教师反馈,参与学习监督。 个人资料管理 用户可以在个人中心更新基本信息,设置个人头像、联系方式、密码等。 支持学籍信息的维护,例如学生的年级、班级、课程历史等。 二、课程管理功能 课程设置 课程创建与编辑:教师或管理员可以创建和编辑课程内容,上传课件、视频、文档等教学材料。 课程分类:根据学科、年级、难度等维度进行课程分类,方便学生浏览和选择。 课程排课:管理员可以设置课程的时间表、教学内容和授课教师,并调整上课时间和频率。 课程安排与通知 课程预约:学生可以在线选择并预约感兴趣的课程,系统根据学生的时

    英特尔2021-2024年网络连接性和IPU路线图

    内容概要:本文档介绍了英特尔2021年至2024年的网络连接性产品和智能处理单元(IPU)的战略和技术路线图。涵盖了从10GbE到200GbE的不同系列以太网适配器的特性、性能和发布时间。详细列出了各个产品的关键功能,如PCIe接口、安全特性、RDMA支持等。同时,介绍了IPU的发展计划,包括200G、400G和800G的不同代次产品的性能提升和新的功能特点。 适合人群:从事网络工程、数据中心管理、IT架构设计的专业技术人员。 使用场景及目标:本文档主要用于了解英特尔未来几年在以太网适配器和IPU领域的技术和产品规划,帮助企业在采购和部署网络设备时做出决策。同时,为研究人员提供最新技术发展趋势的参考。 其他说明:文档内容涉及的技术细节和时间表可能会有变动,请以英特尔官方发布的最新信息为准。

Global site tag (gtag.js) - Google Analytics