jquery动画相关函数

来源：互联网发布：广州网站推广优化公司编辑：程序博客网时间：2024/05/17 09:02

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#div1").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
$("#button2").click(function(){
$("#div1").animate({
left:'250px',
height:'-=150px',
width:'-=150px'
});
});
$("#button3").click(function(){
$("#div1").animate({
height:'toggle'
});
});
$("#button4").click(function(){
var div1=$("#div1")
div1.animate({height:'300px',opacity:'0.4'},"slow");
div1.animate({width:'300px',opacity:'0.8'},"slow");
div1.animate({height:'100px',opacity:'0.4'},"slow");
div1.animate({width:'100px',opacity:'0.8'},"slow");
})
$("#button5").click(function(){
var div2=$("#div2");
div2.animate({left:'100px'},"slow");
div2.animate({width:'200px'},"slow");
div2.animate({fontSize:'4em'},"slow");
});
$("#toggle").click(function(){
$("#panel").slideToggle(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#toggle
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="button1">开始动画变大</button>
<button id="button2">开始动画变小</button>
<button id="button3">开始动画隐藏显示</button>
<button id="button4">开始动画多次变化</button>
<button id="button5">开始动画蓝色变化包括文字</button></br></br>
<div id="div1" style="background:red;height:100px;width:100px;position:absolute">
</div><br /><br /><br /><br /><br /><br /><br /><br />
<div id="div2" style="background:blue;height:100px;width:200px;position:fixed">hellow</div><br /><br /><br /><br /><br /><br /><br /><br />
<button id="stop">停止滑动</button>
<div id="toggle">点击这里，向下滑动面板</div>
<div id="panel">hellow world!</div>
</body>
</html>

1 0