jQuery控制DIV由大到小，由远及近的变化_网页布局

jQuery控制DIV由大到小，由远及近的变化: 发布时间：2019-09-11编辑：脚本学堂

jQuery控制DIV由大到小，由远及近动画变化。

<!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>Panel控制Div运动，由大到小变化。</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>1.3.2.js"></script>
<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
		 .animate({top: "200px" , width :"200px"}, 3000 ,function(){
			   $(this).css("border","5px solid blue");
	 })
        });
    });
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

提示：可修改代码后再运行!

上一篇：使用jquery的动画特效实现缩放一个层
下一篇：JS代码实现的鼠标拖曳图层效果

与 jQuery控制DIV由大到小，由远及近的变化有关的文章

本文标题：jQuery控制DIV由大到小，由远及近的变化
本页链接：http://www.jb200.com/tx/30.html

jQuery控制DIV由大到小，由远及近的变化