<html>
<head>
<title>animate</title>
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block3").animate({
width: "200px",
height: "200px",
fontSize: "20px",
borderWidth: "1px",
top:"400px",
left:"400px",
opacity: "show"
}, 3000 );
});
$("#stop").click(function(){
$("#block3").stop();
});
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
$("#go1").click(function(){
$("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
$("#go2").click(function(){
$("#block2").animate( { width: "90%"}, 1000 )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
});
</script>
<style>
.showDiv
{
width:100px;
height:100px;
border:1px red solid;
display:none;
position:absolute;
left:50px;
top:50px;
color:#C7EDCC;
background-color:#C7EDCC;
filter: Alpha(Opacity=60);
opacity: 0.6;
}
.block
{
width:200px;
height:200px;
border:1px red solid;
position:absolute;
left:100px;
top:100px;
color:#C7EDCC;
background-color:#C7EDCC;
filter: Alpha(Opacity=60);
opacity: 0.6;
}
</style>
</head>
<body>
<input type="button" value="run" id="go" />
<div id="block3" class ="showDiv">Hello!</div>
<input type="button" value="stop" id="stop" />
<br>
<input type="button" id="left" value="left"/>
<input type="button" id="right" value="right"/>
<div class="block"></div>
<br>
<p>adjfksdjfl</p>
<br>
<input type="button" id="go1" value="Animate Block1" />
<input type="button" id="go2" value="Animate Block2" />
<div id="block1">Block1</div><div id="block2">Block2</div>
</body>
</html>
效果自己点击看看吧，我就不多说了。。
9730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
