jQuery动画
需要下载js框架jquery-1.4.3.js
另外,还可以添加一个回调函数,比如:
show('slow',function(){
//这儿的代码会在动画执行完成之后
//才执行。
});
2)、fadeIn() fadeOut(): 淡入、淡出
改变不透明度。
fadeIn,fadeOut可以添加
"slow"/"normal"/"fast"/100参数,也可以
添加一个回调函数。
3)、slideUp() slideDown() : 改变元素的高度
用法跟前面一样。
4)、自定义动画 animate(params,speed,callback):
params: 是一个形如 {"height":"300px","width","200px"}
speed: 单位是毫秒,表示动画执行的速度。
callback:回调函数,动画执行完成之后,执行
该函数。
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
//toggle模拟鼠标连续点击事件
$('#a1').toggle(function(){
//show("slow"/"normal"/"fast"/100)
$('#d1').show(900,function(){
//这儿的代码会在动画执行完成之后才执行。
$(this).html('哈哈,看到我了吧');
});
},function(){
$('#d1').hide(800);
});
//另外fadeIn() fadeOut(): 淡入、淡出
//slideUp() slideDown() : 改变元素的高度
//用法跟前面一样。
});
/*自定义动画 animate(params,speed,callback):
params: 是一个形如 {"height":"300px","width","200px"}
speed: 单位是毫秒,表示动画执行的速度。
callback:回调函数,动画执行完成之后,执行
该函数。*/
$(function(){
//此处d2的position属性不能是static 否则不会动
$('#d2').click(function(){
$(this).animate({'left':'200px','top':'150px'},3000);
$(this).animate({'top':'400px'},2000).fadeOut('slow');
});
});
</script>
HTML
<body>
<a id="a1">点我,给你惊喜</a>
<div id="d1" style="width:200px;height:200px;
border:1px solid black;display:none;">
</div>
<div id="d2" style="width:100px; height:100px; background-color:red; position:relative;"></div>
</body>