jquery动画(animate)小例子

原创
2017/02/27 22:17
阅读数 330
<!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>

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部