jquery animate实现动画

最新推荐文章于 2021-11-27 12:17:12 发布

原创最新推荐文章于 2021-11-27 12:17:12 发布 · 748 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jQuery #JQUERY #Jquery #JQuery

jquery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种利用jQuery库来实现网页元素动画的方法。通过简单的点击事件触发，实现了元素的位置移动、尺寸变化及透明度调整等动画效果。文章通过实例展示了如何针对不同元素设置动画属性，包括水平移动、高度增加及淡出效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<style type="text/css">
#panel{
position:relative;
width:100px;
height:100px;
border:1px solid #0050DO;
background:#96E555;
cursor:pointer;

}
#panel2{
position:relative;
width:100px;
height:100px;
border:1px solid #0050DO;
background:#96E555;
cursor:pointer;

}

#panel3{
position:relative;
width:100px;
height:100px;
border:1px solid #0050DO;
background:#96E555;
cursor:pointer;

}
#panel4{
position:relative;
width:100px;
height:100px;
border:1px solid #0050DO;
background:#96E555;
cursor:pointer;

}
#panel5{
position:relative;
width:100px;
height:100px;
border:1px solid #0050DO;
background:#96E555;
cursor:pointer;

}

</style>

<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){

$("#panel").click(function(){

$(this).animate({left:"500px"},3000);
})
$("#panel2").click(function(){
$(this).animate({left:"+=500px"},3000);
})
$("#panel3").click(function(){
$(this).animate({left:"+=500px",height:"+=500px"},3000).click(function(){

});
})
$("#panel4").click(function(){

$(this).animate({left:"500px",height:"500px",opacity:"0.5"},3000).animate({top:"500px",width:"500px",opacity:"1"},3000).fadeOut("slow");
})

})

</script>

<body>
<div id="panel" class="panel">1</div>
<div id="panel2" class="panel2">2</div>
<div id="panel3" class="panel3">3</div>
<div id="panel4" class="panel4">4</div>
<div id="panel5" class="panel5">5</div>
<form>
用户名：<input type="text" name="text" id="text" /><div id="mm"></div>
密码：<input type="password" name="password" id="password" />
<input type="submit" value="提交" id="sub" />
</form>

</body>
</html>