动画效果

前面的 hide/show,slide in/out 其实也具有动画效果,本篇介绍使用 animate()实现自定义动画效果。

基本语法如下:

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

必选的参数为 params,定义 CSS 用于动画效果的的属性。

可选参数 speed 给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒) 第二个可选参数为回调函数,在 animate()方法结束后调用。

比如下面的例子,将一个

标记移动到其 Left 属性等于250px.
$("button").click(function(){
$("div").animate({left:'250px'});
});

要注意的是,缺省情况下,所有 HTML 元素的位置的固定的,不能移动,因此如果需要修改 HTML 元素的位置,需要事先将它们的 CSS 属性的位置设置为 relative, fixed, 或 absolute。

使用 animate 修改多个属性

下面的例子,可以使用 animate 同时修改多个属性:

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

注意:基本所有的 CSS 属性都可以在 animation 中使用,颜色修改不在 jQuery 核心库中,需要Color Animiation 插件来完成。

使用属性相对值

对于 CSS 属性,除了上面使用的绝对大小,也可以使用相对值来定义,使用 “+”“-”。

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

使用预定义的值

也可以使用预定义的值为属性赋值。比如”show”, “hide”, 或 “toggle”:

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

使用队列功能

缺省 jQuery 支持将多个 animation 功能串起来构从一个队列,然后一个一个的执行队列中的指令。

比如:

$("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");
});

终止动画

jQuery 的使用 stop()方法在动画结束之前停止动画。

基本语法如下:

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

可选参数 stopAll 指明是否同时清除“动画队列”,缺省为 false.意味着只停止当前活动的动画,之后的动画则继续运行。

可选参数 goToEnd 指明是否立即结束当前动画,缺省为 false.

因此缺省的 stop()动作为终止指定 HTML 元素的当前动画效果。如:

$("#stop").click(function(){
$("#panel").stop();
});

Javascript-- jQuery动画篇(2)的更多相关文章

  1. Javascript - Jquery - 动画

    动画(Dynamic) JQuery动画必须是在标准文档下使用 否则可能引起动画时抖动或其它不可预知的结果,标准文档格式:   <!DOCTYPE html PUBLIC "-//W3 ...

  2. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

  3. jquery 动画总结(主要指效果函数)

    动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种:1 gif动画---这就是帧动画,把若干 ...

  4. jQuery事件篇---基础事件

    写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...

  5. 【JavaScript&jQuery】前端资源大全

    综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...

  6. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  7. jQuery初级篇(一)

    知识说明: jQuery库是一个javascript库文件,它比起javascript来,写的更少,但做得更多,下面便对刚开始学习jQuery,一些基础知识整理出来,供后期翻阅. 一.      jQ ...

  8. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  9. 7款经典炫酷的HTML5/jQuery动画应用示例及源码

    jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...

  10. jQuery动画效果实现

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. tomcat源码调试

    三.tomcat目录结构 tomcat的下载安装有很多教程,不再赘述. 现在的tomcat已经到9了,当tomcat下载安装完成后,其目录大致如下:     除了上面的文件夹,还有四个文件:     ...

  2. 使用selenium前学习HTML(3)——元素

    <!-- HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(clos ...

  3. Heartbeats

    很少有人否定,这是一首天籁.凄美动听的声音,触动的,是真正的灵魂深处.所谓“仁者见仁智者见智”,但有些东西是共通的,比如,我们的内心会被同一样东西触动.在这首动听的歌曲中,体现出那男女之间平凡又伟大的 ...

  4. MVC通过服务端对数据进行验证(和AJAX验证一样)

    在实体类中 添加 Remote属性,指定用某个View下的某个方法进行验证,如下面表示用User控制器中的UserExiting方法验证 public    class   User { [Remot ...

  5. Clonal hematopoiesis of indeterminate potential(意义不明的克隆性造血)-CHIP

    意义不明的克隆性造血是指由一个造血干细胞或者其他早期的起始血细胞为了更好的适应环境而发展成一个带有一些基因变异的亚型. 这个亚型带有基因变异一般是非驱动性的,而且该亚型占血细胞的比率跟年龄有很大的相关 ...

  6. wix toolset 用wixui 默认中文

    light.exe .\test.wixobj -ext WixUIExtension -ext WixUtilExtension -cultures:zh-CN

  7. 怎样让.bat文件直接运行不需要右键管理员权限

    :: BatchGotAdmin :------------------------------------- REM --> Check for permissions >nul 2&g ...

  8. Fatal error compiling: java.lang.NoSuc hFieldError??

    用了两天时间,试了各种方法,问题最终解决.是JDK的版本问题:Maven3.5不支持jdk-9.0.1,最后退回:jdk1.8.0_151,问题圆满解决!! [ERROR] Failed to exe ...

  9. Servlet3.0异步请求

    在Servlet3.0之前,Servlet采用Thread-Per-Request的方式处理请求 即每次Http请求都有一个线程从头到尾负责处理 如果一个请求需要进行IO操作,比如访问数据库.调用第三 ...

  10. Mybatis中使用自定义的类型处理器处理枚举enum类型

    知识点:在使用Mybatis的框架中,使用自定义的类型处理器处理枚举enum类型 应用:利用枚举类,处理字段有限,可以用状态码,代替的字段,本实例,给员工状态字段设置了一个枚举类 状态码,直接赋值给对 ...