CSS部分：
<style type="text/css">
*{margin:0;padding:0;}
ul li{ list-style:none;}
img {border:0 none;}
body { padding:100px;}
input[name='show']{ position:fixed;right:50%; top:50px;}
input[name='hide']{ position:fixed;right:40%; top:50px;}
div.test{ width:100px;position:relative;border:1px blue solid;}
</style>
HTML部分：
<input name="show" type="button" value="点击测试"/>
<div>内容填充内容填</div>
jQuery部分：
<script type="text/javascript">
$(function(){
$('div.test').css("opacity","0.5");
$('input').focus()
.click(function(){
$('div.test').animate({left:'400px',height:'100px'},200)
.animate({top:'200px',},200)
.animate({left:0},200)
.animate({top:0},{duration:200,step:cb,queue:true})//将queue值改为false，可使该动画不加入动画队列，即该动画不按默认的先后顺序执行; step为动画函数的callback函数
})
function cb(){
$(this).css({
border:'2px red solid',
opacity:1
})
} })
</script>
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}