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是一款强大的创作工具，广泛应用于制作交互式内容，如动画、演示文稿、应用程序以及网站。...
而计算机技术的发展使得这一流程得以简化，计算机动画技术能够自动生成中间画、自动描线上色，直接输出高质量的动画效果，显著提高了动画制作的效率。 目前，计算机动画技术的应用领域极为广泛，从电影电视、广告、...
【Flash8教程第11章】在动画中应用外部图像和视频是关于如何在Adobe Flash 8中导入和处理多媒体元素的重要章节。本章主要涵盖了以下几个核心知识点： 1. **应用外部图像**： - Flash 8支持多种图形和图像格式，...
第1章 3ds max 9入门 第2章 基本模型创建 第3章 基本编辑操作 第4章 创建图形 ...第11章 基础动画 第12章 粒子动画及影视合成 第13章 室内效果图制作实训 第14章 建筑效果图制作实训 第15章 片头动画制作实训
第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中，动画制作是其核心功能之一，它基于人的视觉原理，...掌握这些基本概念和工具，能帮助用户创作出逼真的三维动画效果。通过不断实践和调整，可以创作出符合需求的高质量动画作品。