jQuery入门[6]－动画 jQuery入门[1]－构造函数
jQuery入门[2]－选择器
jQuery入门[3]－事件
jQuery入门[4]－链式代码
jQuery入门[5]－AJAX
jQuery入门[6]－动画
jQuery直接各种动画，常见的被封装成各种方法，如show()/hide()/slideDown()/fadeIn()等等，参见：Effects
最灵活的则属于animate( params, [duration], [easing], [callback] )方法，参见：animate
其中params为动画的运行结果，可以为各种样式属性，jQuery将在duration指定的时间内，将对象的当前状态渐变为params参数指定的值。如：
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
params也可以是一些相对数据：
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
通过stop()函数可将对象再在执行的动画暂停。选择符:animated可以判断对象是否处在动画运行状态。
以下为来自官网的一个例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();
});
</script>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; }
</style>
</head>
<body>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
</body>
</html>效果为不断变化的一个方块，因为最后一个动画$("div").slideUp("normal", runIt)执行后又 调用runIt方法，所以动画不断循环。
分享到：
相关推荐
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jquery UI主要是用于是UI能变的能容易实现，不需要太多的css，里面已经写了很多类，可以直接使用，常见的图标，方向键头，实现滑动，切换，动画等等都很容易，方便开发在速度上的提升，入门容易，很快上手，
第6章 Ajax在jQuery中的应用/159 6.1 加载异步数据/160 6.1.1 传统的JavaScript方法/160 6.1.2 jQuery中的load()方法/162 6.1.3 jQuery中的全局函数getJSON()/164 6.1.4 jQuery中的全局函数getScript()/166 ...
[jQuery入门到精通]第7章：jQuery动画-让页面动起来!.pdf
[jQuery入门到精通]第7章：jQuery动画-让页面动起来!3.pdf
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...
从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (八) 插播:jQuery实施方案 从零开始学习jQuery (九) jQuery工具函数 从零开始学习jQuery (十) jQueryUI常用功能实战 从零开始学习jQuery ...
---1.html5基础入门 ---2.列表、表格、媒体元素 ---3....---4.css3入门使用 ---5.css3美化 ---6....---7....---8....---9.css3动画 ...5.jQuery制作网页特效 ...---6.jQuery选择器 ---7.jQuery的事件与动画 ---8.jQuery操作D
PPT课件，从入门到深入，讲述jQuery的各种便捷用法，提高我们的开发效率。 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 ...
在使用原生JavaScript开发过程中，存在许多问题，如查找元素的方法单一、遍历数组很麻烦，通常需要嵌套一大堆的for循环，有兼容性问题，实现简单的动画效果也很麻烦，以及代码冗余等问题。为了解决这些问题，提高...
检测CSS3过渡/动画事件支持 入门 安装凉亭： bower install --save jquery-support-css3 或下载或。 在您的网页中： < script src =" jquery.js " > </ script > < script src =" dist/jquery....
从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (八) 插播:jQuery实施方案 从零开始学习jQuery (九) jQuery工具函数 从零开始学习jQuery (十) jQueryUI常用功能实战 从零开始学习jQuery ...
CSS3 菜单动画 入门 bower install bootstrap-dropdown-on-hover 或下载或。 在您的网页中： < script src =" jquery.js " > </ script > < script src =" dist/bootstrap-dropdown-on-hover....
jQuery基础案例分析（初学者入门精通最佳案例），内容丰富，一切用代码说话。 通常，学习一个技术从基础一点点学识一个很慢的学习过程，即便学会了也编不出东西来。通过简单的案例来学习，分析代码为什么这么写，...
使用jQuery能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。...
教程名称：jQuery EasyUI入门视频教程【20讲】课程目录：【】1__JQuery实战视频教程_页面加载时弹出一个对话框【】2_JQuery实战视频教程_点击时弹出一个对话框【】30__JQuery实战视频教程_UI动画效果【】3_JQuery...
Query经典入门教程Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便...
内容简介 1.jQuery的由来及简介 2.jQuery对象和DOM对象 3.jQuery选择器 4.jQuery中的DOM操作 5.使用jQuery创建动画效果
开发周期短，上手快，入门低，但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等，jquery代码,放大镜特效，jquery广告代码，jquery导航，jquery在线客服...
jQuery是继prototype之后又一个优秀的Javascrīpt框架。...jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。