jQuery 动画基础教程
更新时间：2008年12月25日 00:00:08 作者：
用jquery实现简单动画的制作，希望看了这篇文章后，建议大家自己手工打打，学习一下他的思路。
注意此代码需要用到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>
代码：
复制代码 代码如下:
<!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插件模板，这是本人最喜欢的一款了，原因很简单，使用方便，可选择性也比较多。有需要的小伙伴参考下吧2015-01-01
这篇文章主要介绍了jQuery网页定位导航特效实现方法,结合实例形式分析了jQuery网页定位导航的功能描述、原理与核心实现代码,需要的朋友可以参考下2016-12-12
JQuery插件ajaxfileupload.js异步上传文件实例
这篇文章主要介绍了JQuery插件ajaxfileupload.js异步上传文件实例,本文直接给出了HTML代码和JS代码以及后台处理代码,需要的朋友可以参考下2015-05-05
如果一定要用最高版本的jQuery，最省事的办法莫过于在写xxx.focus()时，加一个try/catch，变成try{xxx.focus();}catch(e){}2014-01-01
jQuery 自定义函数写法分享，需要的朋友可以参考下2012-03-03
这篇文章主要介绍了jquery实现select选择框内容左右移动代码，感兴趣的小伙伴们可以参考一下2015-11-11
jQuery为我们提供了方便的事件注册机制，它的优点，操作简单，且不用担心事件覆盖等问题。缺点，普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法2022-07-07
在图片加载前显示一个加载标志，当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能2008-12-12
这篇文章主要介绍了jquery事件冒泡，以及如何阻止jQuery事件冒泡现象，感兴趣的朋友可以参考一下2016-01-01
写JS实现拖动需要一大堆不便维护的代码，实属麻烦，Google了大半天，发现了一个优秀的Jquery插件EasyDrag，只需要一行代码便可轻松在主流浏览器上。2010-12-12
最新评论