当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

第11章 动画效果(中)

发表于: 2015-07-08   作者:onestopweb   来源:转载   浏览:
摘要: 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/

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;
	}	
});

 

 

 

第11章 动画效果(中)

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
<!doctype html> <html> <head> <meta charset="utf-8"> <title><
如果用户不能和图形界面进行交互,它存在的意义有何在那?然而,核心动画的API显示,没有直接的方法
在Android中,系统给我们提供了两种实现动画效果的方法,其中一种是Tween动画,还有一种是Frame动画
还记得么,在前面也曾实现过“只用css让div动起来”,还记得当时是怎么实现的么,是的,transition
第11章 Basic Core Data 本章介绍了Core Data Document-based 类型的应用程序。这类程序自动的实现
上一篇学习用硬编码直接进行对动画效果进行设置(Android中的动画效果学习之---Tween动画(硬编码方法
点击每个按钮都会有对应的动画显示 activity代码: package com.tmacsky; import android.app.Activ
UITableView中cell点击的绚丽动画效果 本人视频教程系类 iOS中CALayer的使用 效果图: 源码: YouXi
通过一个Demo演示动画效果的Splash窗体,同时也是一个全屏的演示DEMO;动画效果通过切换不同的图片
CSS3的动画在PC网页上或者APP上用得越来越多,比如H5页面的应用,目前在营销传播上的意义比较大,还有
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号