index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画效果</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<input type="button" class="button" value="按钮" />
<div id="box">
box
</div>
<div id="pox">
pox
</div>
</body>
</html>
style.css
/* CSS Document */
#box{ width:100px; height:100px; background:red; position:absolute;}
#pox{ width:100px; height:100px; background:green; top:200px; position:absolute;}
demo.js
$(function(){
/*
$('.button').click(function(){
$('#box').animate({
width:'300px',
height:'200px',
opacity:0.5,
fontSize:'50px'
});
});
$('.button').click(function(){
$('#box').animate({
width:'300px',
height:'200px',
opacity:0.5,
fontSize:'50px'
},2000,function(){
alert('动画执行完毕');
});
});
$('.button').click(function(){
$('#box').animate({
left:'300px',
top:'200px'
},'slow');
});
$('.button').click(function(){
$('#box').animate({
left:'+=100px'
},'slow');
});
//回调函数 + 列队动画
$('.button').click(function(){
$('#box').animate({
width:'300px'
},function(){
$('#box').animate({
height:'200px'
},function(){
$('#box').animate({
opacity:0.5
},function(){
$('#box').animate({
fontSize:'50px'
});
});
});
});
});
//在同一个元素的基础上，使用连缀或顺序排列调用，可以实现列队动画
$('.button').click(function(){
$('#box').animate({width:'300px'})
.animate({height:'200px'})
.animate({opacity:0.5})
.animate({fontSize:'50px'});
});
//在同一个元素的基础上，使用连缀或顺序排列调用，可以实现列队动画
$('.button').click(function(){
$('#box').animate({width:'300px'});
$('#box').animate({height:'200px'});
$('#box').animate({opacity:0.5});
$('#box').animate({fontSize:'50px'});
});
$('.button').click(function(){
$('#box').animate({width:'300px'});
$('#pox').animate({height:'200px'});
$('#box').animate({opacity:0.5});
$('#pox').animate({fontSize:'50px'});
});
//box 的第一条和第三条是列队动画
//pox 的第二条和第四条是列队动画
//box 的第一条和 pox 的第二条是同步动画
//box 的第三条和 pox 的第四条是同步动画
//回调函数 + 列队动画
$('.button').click(function(){
$('#box').animate({
width:'300px'
},function(){
$('#pox').animate({
height:'200px'
},function(){
$('#box').animate({
opacity:0.5
},function(){
$('#pox').animate({
fontSize:'50px'
});
});
});
});
});
$('.button').click(function(){
$('#box').slideUp('slow').slideDown('slow').css('background','orange');
});
//CSS 不是动画方法，会默认排列到和第一个动画方法同步
$('.button').click(function(){
$('#box').slideUp('slow').slideDown('slow',function(){
$(this).css('background','orange');
});
});
$('.button').click(function(){
$('#box').slideUp('slow').slideDown('slow').queue(function(){
$(this).css('background','orange');
});
});
//next
$('.button').click(function(){
$('#box').slideUp('slow').slideDown('slow').queue(function(next){
$(this).css('background','orange');
next();
}).hide('slow');
});
//dequeue
$('.button').click(function(){
$('#box').slideUp('slow').slideDown('slow').queue(function(){
$(this).css('background','orange');
$(this).dequeue();
}).hide('slow');
});
$('.button').click(function(){
$('#box').slideUp('slow');
$('#box').slideDown('slow');
$('#box').queue(function(){
$(this).css('background','orange');
$(this).dequeue();
});
$('#box').hide('slow');
});
$('.button').click(function(){
$('#box').slideUp('slow',function(){alert(count());});
$('#box').slideDown('slow');
$('#box').queue(function(){
$(this).css('background','orange');
$(this).dequeue();
});
$('#box').hide('slow');
});
function count(){
return $('#box').queue('fx').length;
}
*/
$('.button').click(function(){
$('#box').slideUp('slow');
$('#box').slideDown('slow',function(){$(this).clearQueue()});
$('#box').queue(function(){
$(this).css('background','orange');
$(this).dequeue();
});
$('#box').hide('slow');
});
function count(){
return $('#box').queue('fx').length;
}
});
相关推荐
在本章“动画效果（下）”中，我们将深入探讨计算机图形学中的动画技术，特别是在软件开发和游戏设计中的应用。动画效果是使程序或应用更具吸引力和交互性的重要手段，能够提供动态视觉体验，增强用户体验。下面我们...
在本章“动画效果（上）”中，我们将探讨如何在软件开发中创建引人入胜的视觉动态，特别是关注编程中的动画技术。动画效果在现代应用和网页设计中起着至关重要的作用，它们能够提升用户体验，使界面更加生动、交互性...
在本章"精通Direct3D图形与动画程序设计 29_第二十九章 海浪效果模拟"中，我们将深入探讨如何使用Direct3D技术来创建逼真的海浪效果。Direct3D是Microsoft开发的一个图形应用程序接口(API)，主要用于游戏开发、专业...
在第11章“动画初级篇”中，我们将深入探讨Maya在动画制作方面的一些基本概念和操作流程，为后续的高级动画学习打下坚实的基础。 Maya是由Autodesk公司开发的一款强大而全面的三维建模、动画、模拟和渲染软件，广泛...
【Flash8教程第11章】在动画中应用外部图像和视频是关于如何在Adobe Flash 8中导入和处理多媒体元素的重要章节。本章主要涵盖了以下几个核心知识点： 1. **应用外部图像**： - Flash 8支持多种图形和图像格式，...
在Direct3D图形与动画程序设计中，运动模糊效果是一个重要的技术，特别是在游戏开发和电影制作中，它能显著提高视觉...通过深入学习和实践，你将能够熟练地运用这些技术，创造出更加逼真、引人入胜的3D图形和动画效果。
这一章可能会涵盖表单验证、提交处理以及使用action和method属性设置表单行为。 3. HTML框架：框架允许网页内容分为多个独立显示的区域，每个区域可以加载不同的网页。学习框架有助于理解frameset、frame和noframes...
第21章 HLSL高级应用 1、HLSLSelfShadowing 演示使用HLSL渲染语言进行GPU编程实现自遮蔽阴影。 2、HLSLBumpTexture 演示使用HLSL渲染语言进行GPU编程实现凹凸纹理映射。 3、HLSLCubeMapping 演示使用HLSL渲染语言...
《网页设计与制作》课程中的第11章主要讲解了网页动画的制作，特别是通过Adobe Flash 8这一矢量动画编辑软件来实现。Flash 8是一款强大的创作工具，广泛应用于制作交互式内容，如动画、演示文稿、应用程序以及网站。...
第5章介绍如何实现平滑的动画效果；第6章讲解如何用JavaScript语言来实现精灵；第7章展示了如何在动画中模拟物理效果；第8章介绍了进行碰撞检测所用的技术；第 9章以一个简单但是高效的游戏引擎开始，提供了游戏制作...
第1章 3ds max 9入门 第2章 基本模型创建 第3章 基本编辑操作 第4章 创建图形 ...第11章 基础动画 第12章 粒子动画及影视合成 第13章 室内效果图制作实训 第14章 建筑效果图制作实训 第15章 片头动画制作实训
计算机动画技术则大大简化了这个流程，可以自动生成中间画、自动描线上色，并且能够直接输出高质量的动画效果，增强了真实感。 计算机动画广泛应用于电影电视、广告、教育、训练、工业仿真、医疗、游戏等多个领域。...
总的来说，3ds max 7是一款强大的三维动画工具，它提供了一整套工具集，从基础建模到高级动画制作，使得用户能够创建出栩栩如生的三维动画效果。对于想要学习三维动画的人来说，理解和掌握这些基础知识和流程至关...
第1章Powerpoint2016的初步认识.mp4 第2章Powerpoint2016的新增...第21章动画效果实例(2) .mp4 第22章插入超链接.mp4 第23章认识幻灯片放映视图.mp4 第24章操作幻灯片.mp4 第25章打印幻灯片.mp4 第26章打包演示文稿.mp4
在第十一章“应用程序框架”中，作者可能涵盖了以下几个关键知识点： 1. **DirectX SDK**：介绍DirectX软件开发工具包，包括安装、配置和使用的步骤，以及SDK中包含的各种库和头文件的作用。 2. **设备初始化**：...
【3dsmax 6 动画基础】 在3ds max 6中，动画制作是其核心功能之一，它基于人的视觉原理，...掌握这些基本概念和工具，能帮助用户创作出逼真的三维动画效果。通过不断实践和调整，可以创作出符合需求的高质量动画作品。
### 第十一章：面部动画 - **面部动画**：专注于实现逼真的面部表情变化，如眨眼、微笑等。 - _知识点_： - 唇同步技术。 - 如何使用DirectX实现面部动画。 - **文件转换**：介绍如何将不同格式的3D模型文件转换...
在本“Flash CS5从新手到高手视频教程下载第11章 为动画添加图片、声音和视频.zip”中，我们将深入学习如何使用Adobe Flash CS5这个强大的动画创作工具，为我们的作品添加丰富的多媒体元素，包括图片、音频和视频。...