编程 Javascript

jQuery 动画基础教程

Posted in Javascript onDecember 25, 2008

注意此代码需要用到jquery的js文件，才可以用所以大家可以先下载一个jquery文件，注意调用路径。
代码：

<!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> 
<title>jQuery动画基础</title> 
<script type="text/javascript" src="../js/jquery-1.2.6.js"></script> 
<style type="text/css"> 
.theImage{ 
position:relative; 
background:Green; 
width:100px; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$("#btnShow").click(function(){ 
//$("#block").show(1000);//没有参数则没有动画效果 
//$("#block").fadeIn("slow");//根据透明度显示或隐藏 
$("#block").slideDown();//拉下来。只改变高度 
}); 
$("#btnHide").click(function(){ 
//$("#block").hide("normal");//slow,normal,fast 
//$("#block").fadeOut(5000); 
$("#block").slideUp(); 
}); //自定义动画 
$("#btnImage").click(function(){ 
$("#imageDiv").animate( 
//I 
//移动到的位置,这里的位置是相对与原来的位置 
//top即相对原来的位置向上移动多少距离,没搞明白,结果是向下移动了。 
//{left:"400px",top:"100px"}, 
//3000 
//II 
{left:"+=50",width:"300px",height:"200px"},//改变位置的同时改变宽度高度 
3000 
); 
}); 
//同时执行两个动画，执行完一个，然后接着执行另一个。 
$("#btnImage").click(function(){ 
$("#imageDiv").animate( 
{left:"100px",width:"30px",height:"20px"}, 
3000, 
function(){alert('callback函数');}//动画结束后要执行的函数 
); 
}); 
}); 
</script> 
</head> 
<body> 
<div> 
<button id="btnShow"> Show</button> 
<button id="btnHide">Hide</button> 
<div id="block" style="background:#369; width:150px; height:100px; ">Hello!</div> 
<button id="btnImage">moveImage</button> 
<div id="imageDiv" class="theImage">image</div> 
<div>hi</div> 
</div> 
</body> 
</html>

jQuery 动画基础教程

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery与prototype框架的详细对比

Nov 21 Javascript

表格奇偶行设置不同颜色的核心JS代码

Dec 24 Javascript

js实现正方形颜色从下往上升的效果

Aug 04 Javascript

Javascript基础教程之数据类型（数值 Number）

Jan 18 Javascript

jQuery实现向下滑出的二级菜单效果实例

Aug 22 Javascript

jQuery旋转木马式幻灯片轮播特效

Dec 04 Javascript

JavaScript直播评论发弹幕切图功能点集合效果代码

Jun 26 Javascript

基于原生JS实现图片裁剪

Aug 01 Javascript

微信小程序picker组件简单用法示例【附demo源码下载】

Dec 05 Javascript

vue.js默认路由不加载linkActiveClass问题的解决方法

Dec 11 Javascript

Angular通过指令动态添加组件问题

Jul 09 Javascript

Electron-vue开发的客户端支付收款工具的实现

May 24 Javascript

javascript jQuery插件练习

Dec 24 #Javascript

javascript 动态数据下的锚点错位问题解决方法

Dec 24 #Javascript

javascript 网页跳转的方法

Dec 24 #Javascript

javascript prototype，executing，context，closure

Dec 24 #Javascript

JavaScript 事件参考手册

Dec 24 #Javascript

javascript XML数据显示为HTML一例

Dec 23 #Javascript

window.location和document.location的区别分析

Dec 23 #Javascript