在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp()方法只会改变元素的高度,但是很多情况下,需要对动画有更多控制,这些方法无法满足用户的需求,这时,jQuery中的自定义动画animate()就可以用来解决这些高级的动画问题了。

1,语法结构

首先来看一下该方法的语法结构:animate(params,speed,callback)

  • params:一个包含样式属性及值的映射
  • speed:速度参数,可选
  • callback:在动画完成时执行的函数,可选,

在开始操作前,先在html中新建一个div元素,具体如下,接下的所有操作均在此基础上进行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<style type="text/css">
#box1 {
position:relative;
width:100px;
height:100px;
border:1px solid #0050d0;
background-color: #96e555;
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>

2,自定义简单动画

animate()也可以像前面的方法那样,让元素动起来,而且动画效果可以更加精致新颖。

首先要实现的是鼠标悬浮时元素向右移动。

<script type="text/javascript">
  $(function(){
  $("#box1").hover(function(){
   $(this).animate({left:"100px"},3000);
   })
  })
</script>

上面的代码能实现鼠标悬浮时,元素移动到距离左边100px出的位置,移动时间用时3000毫秒。

<script type="text/javascript">
$(function(){
$("#box1").hover(function(){
$(this).animate({left:"+=100px"},3000);
})
})
</script>

这段代码也是让元素移动,不同的是,这段代码是让元素在当前的位置上进行累加的,即继续向右移动100px,而上面的代码则与当前位置无关,直接将元素移动到距离左边100px处。

3,多重动画

就是执行多个动画,比如让元素既能向右滑动,又能放大元素。

<script type="text/javascript">
$(function(){
$("#box1").hover(function(){
$(this).animate({left:"200px",height:"200px"},3000);
})
})
</script>

上面这段代码能同时实现两个效果,让元素的向右移动和高度增加同时发生,用时均为3000毫秒。

<script type="text/javascript">
$(function(){
$("#box1").hover(function(){
$(this).animate({left:"200px"},3000);
$(this).animate({height:"200px"},3000);
})
})
</script>

上面这段代码也能实现两个效果,但是两个效果是分开执行,前3000毫秒用来实现向右移动,移动结束后,后3000毫秒用来实现高度增加。上面的两个动画均是对同一个对象进行操作,因此可以采用链式的写法:

<script type="text/javascript">
$(function(){
$("#box1").hover(function(){
$(this).animate({left:"200px"},3000)
.animate({height:"200px"},3000);
})
})
</script>

向这种动画的执行效果具有先后顺序,称为“动画队列”

4,综合动画

接下来要完成更复杂的动画,鼠标悬浮的时候,让元素向右移动的同时增大它的高度,并将它的透明度从50%变换到100%,然后再让它从上到下移动,同时它的宽度变大,当完成这些效果后,让它以淡出的方式隐藏。

<script type="text/javascript">
$(function(){
$("#box1").css("opacity","0.5")
$("#box1").hover(function(){
$(this).animate({left:"200px",height:"200px",opacity:'1'},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut("slow");
})
})
</script>

上面的效果可以分解为3步,第一步是在前3000毫秒同时实现右移动,高度增加和透明度变化,第二步是在第二个3000毫秒同时实现向下移动和宽度增加,第三步实现淡出隐藏,并通过链式的方式将这三步进行排队依次执行。

5,动画回调函数

如果,我们想在上面的综合动画中,将元素的淡出隐藏改为切换元素的css样式,如果我们继续采用上面的方法,是不能得到理想的效果的。

<script type="text/javascript">
$(function(){
$("#box1").css("opacity","0.5")
$("#box1").hover(function(){
$(this).animate({left:"200px",height:"200px",opacity:'1'},3000)
.animate({top:"200px",width:"200px"},3000)
.css("border","5px solid blue");
})
})
</script>

虽然我们的css写在了最后面,预期在动画的最后一步改变元素样式,但实际情况是,刚开始执行动画的时候,最后的css()方法就被执行,这是因为css()并不是animate(),不会被加到动画队列中,而是立即执行,此时,如果我们想要达到预期的效果,可是使用回调函数对非动画方法实现排队。

<script type="text/javascript">
$(function(){
$("#box1").css("opacity","0.5")
$("#box1").hover(function(){
$(this).animate({left:"200px",height:"200px",opacity:'1'},3000)
.animate({top:"200px",width:"200px"},3000,function(){
$(this).css("border","5px solid blue");
})
})
})
</script>

自定义动画animate()的更多相关文章

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

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

  2. 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  3. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  4. jQuery---自定义动画 animate();

    自定义动画 animate(); 第一个参数:{对象},里面可以传需要动画的样式 第二个参数:speed 动画的执行时间 第三个参数:easing 动画的执行效果 第四个参数:callback 回调函 ...

  5. Animate自定义动画

    在jQuery中出了基本的动画之外,还有用户 可以自定义的函数,Animate() 用于创建自定义动画的函数. apI上指出: 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表 ...

  6. jQuery中关于如何使用animate自定义动画

    动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一 ...

  7. Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析

    这是关于RecyclerView的第二篇,说的是如何自定义Item动画,但是请注意,本文不包含动画的具体实现方法,只是告诉大家如何去自定义动画,如何去参考源代码. 我们知道,RecyclerView默 ...

  8. Android 动画效果 及 自定义动画

    1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...

  9. Android 5.0自定义动画

    材料设计中的动画对用户的操作给予了反馈,并且在与应用交互时提供了持续的可见性.材料主题提供了一些按钮动画和活动过渡,Android 5.0允许你自定义动画并且可以创建新的动画: Touch Feedb ...

随机推荐

  1. (翻译)Angular 1.3中的验证器管道

    原文地址:VALIDATORS PIPELINE IN ANGULAR 1.3 我们知道在Angular中操作表单是很爽的.因为Angular本身的作用域模型,我们总能在相应的作用域中获取到表单当前的 ...

  2. 深入理解Linux网络技术内幕——Notification内核通知表链

    为什么要有内核通知表链:     Linux由多个相互依赖的子系统组成.其中一些子系统可能需要对其他子系统的一些事件感兴趣.这样子系统之间需要一些通信机制来实现这一功能.     在接触Notific ...

  3. UDP广播与多播

    UDP广播与多播 使用UDP协议进行信息的传输之前不需要建议连接.换句话说就是客户端向服务器发送信息,客户端只需要给出服务器的ip地址和端口号,然后将信息封装到一个待发送的报文中并且发送出去.至于服务 ...

  4. [转]数据库更新(Update语句)查询

    2011-03-27 10:40:11| 分类: Database |举报|字号 订阅原文出自:http://blog.csdn.net/ylnjust02/archive/2005/12/10/54 ...

  5. secureCRT 字体颜色、文件夹和文件显示的颜色

    secureCRT菜单栏中选择会话选项 修改显示文件夹和文件显示的颜色 修改字体样式 查看效果

  6. B+与B-树

    1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树:⑴树中每个结点至多有m 棵子树:⑵若根结点不是叶子结点,则至少 ...

  7. opencv-learnopencv-Facial Landmark Detection

    re: 1.facial-landmark-detection; https://www.learnopencv.com/facial-landmark-detection/ 2.landmark h ...

  8. 【opencv基础】detectmultiscale函数详解

    前言 简单的人脸检测程序可以直接基于opencv的函数库进行实现,本文介绍一下detectMultiScale函数. 函数简介 opencv2人脸检测使用的是detectMultiScale函数,可以 ...

  9. 使用Nginx实现灰度发

     灰度发布是指在黑与白之间,能够平滑过渡的一种发布方式.AB test就是一种灰度发布方式,让一部分用户继续用A,一部分用户开始用B,如果用户对B没有什么反对意见,那么逐步扩大范围,把所有用户都迁移到 ...

  10. 龙儿经理嘴上经常说的B树

    国内的数据结构教材一般是按照Knuth定义,即“阶”定义为一个节点的子节点数目的最大值. 对于一棵m阶B-tree,每个结点至多可以拥有m个子结点.各结点的关键字和可以拥有的子结点数都有限制 规定m阶 ...