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="show" value="显示" />
<input type="button" class="hide" value="隐藏" />
<div id="box">
box
</div>
<div class="test">你</div>
<div class="test">好</div>
<div class="test">吗</div>
<div class="test">？</div>
<input type="button" class="show" value="显示" />
<input type="button" class="hide" value="隐藏" />
<input type="button" class="show" value="显示" />
<input type="button" class="hide" value="隐藏" />
<input type="button" class="toggle" value="切换" />
<div id="box">
box
</div>
<input type="button" class="up" value="上" />
<input type="button" class="down" value="下" />
<input type="button" class="toggle" value="切换" />
<div id="box">
box
</div>
-->
<input type="button" class="in" value="淡入" />
<input type="button" class="out" value="淡出" />
<input type="button" class="toggle" value="切换" />
<input type="button" class="to" value="透明度到" />
<div id="box">
box
</div>
</body>
</html>
style.css
/* CSS Document */
#box{ width:100px; height:100px; background:red;}
.test{ padding:5px; margin-right:5px; background:orange; float:left; display:none;}
demo.js
$(function(){
/*
$('.show').click(function(){
$('#box').show();
});
$('.hide').click(function(){
$('#box').hide();
});
//可以传递两个参数，一个是速度，第二个是回调函数
$('.show').click(function(){
$('#box').show(1000);
});
$('.hide').click(function(){
$('#box').hide(1000);
});
$('.show').click(function(){
$('#box').show('show');
});
$('.hide').click(function(){
$('#box').hide('show');
});
$('.show').click(function(){
$('#box').show('normal');
});
$('.hide').click(function(){
$('#box').hide('normal');
});
$('.show').click(function(){
$('#box').show('fast');
});
$('.hide').click(function(){
$('#box').hide('fast');
});
//默认400毫秒
$('.show').click(function(){
$('#box').show('sdfsd');
});
$('.hide').click(function(){
$('#box').hide('');
});
$('.show').click(function(){
$('#box').show('slow',function(){
alert('显示完毕！')
});
});
$('.hide').click(function(){
$('#box').hide('slow');
});
//同步动画，四个区块同时显示出来
$('.show').click(function(){
$('.test').show('show');
});
//列队动画
$('.show').click(function(){
$('.test').eq(0).show('fast',function(){
$('.test').eq(1).show('fast',function(){
$('.test').eq(2).show('fast',function(){
$('.test').eq(3).show('fast');
});
});
});
});
//列队动画，递归自调用
$('.show').click(function(){
$('.test').first().show('fast',function testShow(){
$(this).next().show('fast',testShow);
});
});
//列队动画，递归自调用
$('.show').click(function(){
$('.test').first().show('fast',function testShow(){
$(this).next().show('fast',testShow);
});
});
$('.hide').click(function(){
$('.test').last().hide('fast',function testShow(){
$(this).prev().hide('fast',testShow);
});
});
$('.up').click(function(){
$('#box').slideUp('slow');
});
$('.down').click(function(){
$('#box').slideDown('slow');
});
$('.toggle').click(function(){
$('#box').slideToggle('slow');
});
*/
$('.out').click(function(){
$('#box').fadeOut('slow');
});
$('.in').click(function(){
$('#box').fadeIn('slow');
});
$('.toggle').click(function(){
$('#box').fadeToggle('slow');
});
$('.to').click(function(){
$('#box').fadeTo('slow',0.33);//0-1
});
});
相关推荐
在本章“动画效果（下）”中，我们将深入探讨计算机图形学中的动画技术，特别是在软件开发和游戏设计中的应用。动画效果是使程序或应用更具吸引力和交互性的重要手段，能够提供动态视觉体验，增强用户体验。下面我们...
在本章“第11章 动画效果（中）”中，我们将深入探讨计算机图形学和编程领域中的动画制作技术。尽管描述为空，但从标题我们可以推断，本章可能是某个教程或系列文章的一部分，专注于讲解如何在软件开发中创建中间...
总之，《Maya 2012中文版入门与实战视频教程》的第11章“动画初级篇”将带你走进三维动画的世界，通过一系列实例操作，逐步掌握Maya的基础动画技能。无论你是对动画制作充满热情的初学者，还是希望拓宽技能范围的...
在本章"精通Direct3D图形与动画程序设计 29_第二十九章 海浪效果模拟"中，我们将深入探讨如何使用Direct3D技术来创建逼真的海浪效果。Direct3D是Microsoft开发的一个图形应用程序接口(API)，主要用于游戏开发、专业...
在Direct3D图形与动画程序设计中，运动模糊效果是一个重要的技术，特别是在游戏开发和电影制作中，它能显著提高视觉...通过深入学习和实践，你将能够熟练地运用这些技术，创造出更加逼真、引人入胜的3D图形和动画效果。
第21章 HLSL高级应用 1、HLSLSelfShadowing 演示使用HLSL渲染语言进行GPU编程实现自遮蔽阴影。 2、HLSLBumpTexture 演示使用HLSL渲染语言进行GPU编程实现凹凸纹理映射。 3、HLSLCubeMapping 演示使用HLSL渲染语言...
这一章可能会涵盖表单验证、提交处理以及使用action和method属性设置表单行为。 3. HTML框架：框架允许网页内容分为多个独立显示的区域，每个区域可以加载不同的网页。学习框架有助于理解frameset、frame和noframes...
《网页设计与制作》课程中的第11章主要讲解了网页动画的制作，特别是通过Adobe Flash 8这一矢量动画编辑软件来实现。Flash 8是一款强大的创作工具，广泛应用于制作交互式内容，如动画、演示文稿、应用程序以及网站。...
第1章 3ds max 9入门 第2章 基本模型创建 第3章 基本编辑操作 第4章 创建图形 ...第11章 基础动画 第12章 粒子动画及影视合成 第13章 室内效果图制作实训 第14章 建筑效果图制作实训 第15章 片头动画制作实训
【Flash8教程第11章】在动画中应用外部图像和视频是关于如何在Adobe Flash 8中导入和处理多媒体元素的重要章节。本章主要涵盖了以下几个核心知识点： 1. **应用外部图像**： - Flash 8支持多种图形和图像格式，...
计算机动画技术则大大简化了这个流程，可以自动生成中间画、自动描线上色，并且能够直接输出高质量的动画效果，增强了真实感。 计算机动画广泛应用于电影电视、广告、教育、训练、工业仿真、医疗、游戏等多个领域。...
第1章Powerpoint2016的初步认识.mp4 第2章Powerpoint2016的新增...第21章动画效果实例(2) .mp4 第22章插入超链接.mp4 第23章认识幻灯片放映视图.mp4 第24章操作幻灯片.mp4 第25章打印幻灯片.mp4 第26章打包演示文稿.mp4
在本章"精通Direct3D图形与动画程序设计 27_第二十七章 自然现象模拟"中，我们将深入探讨如何使用Direct3D技术来创建逼真的自然环境效果。Direct3D是Microsoft开发的一个强大的图形应用程序接口(API)，广泛应用于...
总的来说，3ds max 7是一款强大的三维动画工具，它提供了一整套工具集，从基础建模到高级动画制作，使得用户能够创建出栩栩如生的三维动画效果。对于想要学习三维动画的人来说，理解和掌握这些基础知识和流程至关...
在第十一章“应用程序框架”中，作者可能涵盖了以下几个关键知识点： 1. **DirectX SDK**：介绍DirectX软件开发工具包，包括安装、配置和使用的步骤，以及SDK中包含的各种库和头文件的作用。 2. **设备初始化**：...
### 第十一章：面部动画 - **面部动画**：专注于实现逼真的面部表情变化，如眨眼、微笑等。 - _知识点_： - 唇同步技术。 - 如何使用DirectX实现面部动画。 - **文件转换**：介绍如何将不同格式的3D模型文件转换...
综上所述，这一章的学习涵盖了幻灯片切换、动画和音效的各个方面，旨在提升你在PowerPoint演示设计中的专业技能，使你的演示更加引人入胜、富有表现力。通过实践这些技巧，你将能够制作出更具吸引力和影响力的演示...
【3dsmax 6 动画基础】 在3ds max 6中，动画制作是其核心功能之一，它基于人的视觉原理，...掌握这些基本概念和工具，能帮助用户创作出逼真的三维动画效果。通过不断实践和调整，可以创作出符合需求的高质量动画作品。