前面的hide/show,slide in/out其实也具有动画效果,本篇介绍使用animate()实现自定义动画效果。
基本语法如下:
$(selector).animate({params},speed,callback);
必选的参数为params,定义CSS用于动画效果的的属性。
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在animate()方法结束后调用。
比如下面的例子,将一个<div>标记移动到其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");
});
或
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
分享到:
相关推荐
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...
教程名称:jQuery EasyUI入门视频教程【20讲】课程目录:【】1__JQuery实战视频教程_页面加载时弹出一个对话框【】2_JQuery实战视频教程_点击时弹出一个对话框【】30__JQuery实战视频教程_UI动画效果【】3_JQuery...
[jQuery入门到精通]第7章:jQuery动画-让页面动起来!.pdf
[jQuery入门到精通]第7章:jQuery动画-让页面动起来!3.pdf
Query经典入门教程Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便...
从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件...
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。 jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很...
使用jQuery能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。...
教程名称: 【动力节点】jquery高清视频教程_Java 小白入门到精通jQuery是优秀的Javascript框架,能使用户更方便地处理HTML Documents、events、实现动画效果,并且方便地为网站提供Ajax交互。本套Java视频...
PHP100视频教程108:JQuery之各类动画效果的实现 PHP100视频教程109:JQuery 之 Ajax 开发详解 PHP100视频教程110:Jquery案例 之 双下拉框内容移动 PHP100视频教程111:Jquery案例 之 复选框与隔行换色 PHP100...
在使用原生JavaScript开发过程中,存在许多问题,如查找元素的方法单一、遍历数组很麻烦,通常需要嵌套一大堆的for循环,有兼容性问题,实现简单的动画效果也很麻烦,以及代码冗余等问题。为了解决这些问题,提高...
jQuery基础案例分析(初学者入门精通最佳案例),内容丰富,一切用代码说话。 通常,学习一个技术从基础一点点学识一个很慢的学习过程,即便学会了也编不出东西来。通过简单的案例来学习,分析代码为什么这么写,...
jQuery是优秀的JavaScript框架,能使用户更方便地处理HTML Documents、events、实现动画效果,并且方便地为网站提供Ajax交互。本视频教程循序渐进地对jQuery的各种选择器、函数和方法调用进行了详细的讲解,更结合了...
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
内容简介 1.jQuery的由来及简介 2.jQuery对象和DOM对象 3.jQuery选择器 4.jQuery中的DOM操作 5.使用jQuery创建动画效果
第2节:动画第2节教您如何在jQuery中使用预定义和自定义动画,包括淡入淡出,滑动和移动元素。第3节:jQuery选择器第三部分是关于在页面上选择正确的元素。 这包括使用CSS选择器,用于遍历DOM的jQuery函数以及基于...
课程目标什么是jQuery 是一个JavaScript的函数库 jQuery是一个轻量级的JavaScript库 浏览器兼容比较好 jQuery可以简化JavaScript代码适用人群...jQuery选择器的使用jQuery链式语法使用jQuery 代码优化设计jQuery动画
第1章 jQuery入门 1.1 jQuery能做什么 1.2 jQuery为什么如此出色 1.3 第一个jQuery文档 1.3.1 下载jQuery 1.3.2 设置HTML文档 1.3.3 编写jQuery代码 1.4 小结 第2章 选择符...
第1章 jQuery开发入门/1 1.1 jQuery概述/2 1.1.1 认识jQuery /2 1.1.2 jQuery基本功能/2 1.1.3 搭建jQuery开发环境/3 1.1.4 编写第一个简单的jQuery应用/3 1.1.5 jQuery程序的代码风格/5 1.2 jQuery的简单...
第5章jQuery Mobile入门 l jQuery Mobile入门 1.1 jQuery Mobile简介 1.2 jQuery Mobile准备文档 1.3 jQuery Mobile架构 1.3.1 jQuery Mobile属性 1.3.2 jQuery Mobile主题 1.3.3 jQuery Mobile视图 操作案例1:制作...