jquery动画（animate）小例子

最新推荐文章于 2024-09-09 09:35:48 发布

weixin_33862041

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量115

点赞数

文章标签： javascript xhtml python ViewUI

原文链接：https://my.oschina.net/u/2391658/blog/847334

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="jquery.js"></script>
	<style type="text/css">
		#panel {
			position: relative;
			width:100px;
			height: 100px;
			border: 1px solid #0050D0;
			background: #96E555;
			cursor: pointer;
		}

	</style>
</head>
<body>
	<div id="panel">
		<h5 class="header">新闻标题</h5>
		<div class="content">新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
		</div>
	</div>
 <script type="text/javascript">
 $().ready(function(){
 		//先向左移动并同时增大高度，并同时将不透明度从50%提高到100%，然后向下移动，同时增大宽度，然后淡出，最后淡入，淡入后改版边框颜色及粗细
 		$("#panel").css("opacity",0.5);
 		$("#panel").click(function(){
 			$(this).animate({
 				left: "400px",
 				height: "200px",
 				opacity:"1"
 			},3000).animate({
 				top: "200px",
 				width: "200px"},
 				3000).fadeOut('slow', function() {
 					$(this).fadeIn('slow', function() {
 						$(this).css("border","5px solid blue")
 					});
 				});
 		});

 	$(".header").click(function(event) {
 		if($(this).next().is(":visible")){
 			 		//$(this).next().hide(600);//元素在600ms内慢慢隐藏
 			 		//$(this).next().fadeOut();//元素慢慢淡出
 			 		$(this).next().slideUp();//元素向上收起隐藏

 			 	} else {
 			 		//$(this).next().show("slow");
 			 		//$(this).next().fadeIn();
 			 		$(this).next().slideDown();
 			 	}

 	});
 });

 </script>

</body>

</html>

转载于:https://my.oschina.net/u/2391658/blog/847334