您的位置: 首页  >  IT文章  >  JQuery动画片特效

JQuery动画片特效

分类: IT文章 • 2022-05-03 22:39:06
JQuery动画特效
1.hide()和show()使用，hide()将对象隐藏并从DOM结构中移除，show()将对象显示，演示代码如下：
<html>
<head>
<title>show()、hide()方法</title>
<style type="text/css">
<!--
p{
	border:1px solid #003863;
	font-size:13px;
	padding:4px;
	background:#FFFF00;
}
input{
	border:1px solid #003863;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	padding:3px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:first").click(function(){
		$("p").hide();	//隐藏
	});
	$("input:last").click(function(){
		$("p").show();	//显示
	});
});
</script>
</head>
<body>
	<input type="button" value="Hide"> <input type="button" value="Show">
	点击按钮，看看效果

    <span>一段其它的文字</span>
</body>
</html>

2.使用jquery实现多级菜单，简单和易懂：
<html>
<head>
<title>多级菜单</title>
<style type="text/css">
<!--
ul{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
li{
	padding:1px; margin:0px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("li:has(ul)").click(function(e){
		if(this==e.target){
			if($(this).children().is(":hidden")){
				//如果子项是隐藏的则显示
				$(this).css("list-style-image","url(minus.gif)")
				.children().show();
			}else{
				//如果子项是显示的则隐藏
				$(this).css("list-style-image","url(plus.gif)")
				.children().hide();
			}
		}
		return false;	//避免不必要的事件混绕
	}).css("cursor","pointer").click();	//加载时触发点击事件
	
	//对于没有子项的菜单，统一设置
	$("li:not(:has(ul))").css({
		"cursor":"default",
		"list-style-image":"none"
	});
});
</script>
</head>
<body>
<ul>
	<li>第1章 Javascript简介</li>
	<li>第2章 Javascript基础</li>
	<li>第3章 CSS基础
		<ul>
			<li>第3.1节 CSS的概念</li>
			<li>第3.2节 使用CSS控制页面
				<ul>
					<li>3.2.1 行内样式</li>
					<li>3.2.2 内嵌式</li>
				</ul>
			</li>
			<li>第3.3节 CSS选择器</li>
		</ul>
	</li>
	<li>第4章 CSS进阶
		<ul>
			<li>第4.1节 div标记与span标记</li>
			<li>第4.2节 盒子模型</li>
			<li>第4.3节 元素的定位
				<ul>
					<li>4.3.1 float定位</li>
					<li>4.3.2 position定位</li>
					<li>4.3.3 z-index空间位置</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</body>
</html>

<html>
<head>
<title>多级菜单</title>
<style type="text/css">
<!--
ul{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
li{
	padding:1px; margin:0px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("li:has(ul)").click(function(e){
		if(this==e.target){
			$(this).children().toggle();
			$(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
		}
		return false;	//避免不必要的事件混绕
	}).css("cursor","pointer").click();	//加载时触发点击事件
	
	//对于没有子项的菜单，统一设置
	$("li:not(:has(ul))").css({
		"cursor":"default",
		"list-style-image":"none"
	});
});
</script>
</head>
<body>
<ul>
	<li>第1章 Javascript简介</li>
	<li>第2章 Javascript基础</li>
	<li>第3章 CSS基础
		<ul>
			<li>第3.1节 CSS的概念</li>
			<li>第3.2节 使用CSS控制页面
				<ul>
					<li>3.2.1 行内样式</li>
					<li>3.2.2 内嵌式</li>
				</ul>
			</li>
			<li>第3.3节 CSS选择器</li>
		</ul>
	</li>
	<li>第4章 CSS进阶
		<ul>
			<li>第4.1节 div标记与span标记</li>
			<li>第4.2节 盒子模型</li>
			<li>第4.3节 元素的定位
				<ul>
					<li>4.3.1 float定位</li>
					<li>4.3.2 position定位</li>
					<li>4.3.3 z-index空间位置</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</body>
</html>

3.使用toggle()实现伸缩菜单：
<html>
<head>
<title>伸缩的菜单，用toggle()重写</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	width:200px;
	font-family:Arial;
}
#navigation > ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation > ul > li {
	border-bottom:1px solid #ED9F9F;	/* 添加下划线 */
}
#navigation > ul > li > a{
	display:block;						/* 区块显示 */
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #711515;		/* 左边的粗红边 */
	border-right:1px solid #711515;		/* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
	background-color:#c11136;
	color:#FFFFFF;
}
#navigation > ul > li > a:hover{		/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}

/* 子菜单的CSS样式 */
#navigation ul li ul{
	list-style-type:none;
	margin:0px;
	padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
	border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
	display:block;
	padding:3px 3px 3px 0.5em;
	text-decoration:none;
	border-left:28px solid #a71f1f;
	border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
	background-color:#e85070;
	color:#FFFFFF;
}
#navigation ul li ul li a:hover{
	background-color:#c2425d;
	color:#ffff00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("li").find("ul").prev().click(function(){
		$(this).next().toggle();
	});
	$("li:has(ul)").find("ul").hide();
});
</script>
</head>
<body>
<div id="navigation">
	<ul id="listUL">
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a>
        	<ul>
            	<li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
		<li><a href="#">Sports</a>
        	<ul>
            	<li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>        
        </li>
		<li><a href="#">Weather</a>
        	<ul>
            	<li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
            </ul>
        </li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html>

4.使用hide()和show()实现逐渐隐藏和显示：
<html>
<head>
<title>show()、hide()方法</title>
<style type="text/css">
<!--
body{
	background:url(bg1.jpg);
}
img{
	border:1px solid #FFFFFF;
}
input{
	border:1px solid #FFFFFF;
	font-size:13px; padding:4px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#000000;
	color:#FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:first").click(function(){
		$("img").hide(3000);	//逐渐隐藏
	});
	$("input:last").click(function(){
		$("img").show(1000);	//逐渐显示
	});
});
</script>
</head>
<body>
	<input type="button" value="Hide"> <input type="button" value="Show">
	<p><img src="01.jpg"></p>
</body>
</html>

5.使用toggle()实现菜单逐渐伸缩：
<html>
<head>
<title>toggle(speed)方法</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	width:200px;
	font-family:Arial;
}
#navigation > ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation > ul > li {
	border-bottom:1px solid #ED9F9F;	/* 添加下划线 */
}
#navigation > ul > li > a{
	display:block;						/* 区块显示 */
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #711515;		/* 左边的粗红边 */
	border-right:1px solid #711515;		/* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
	background-color:#c11136;
	color:#FFFFFF;
}
#navigation > ul > li > a:hover{		/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}

/* 子菜单的CSS样式 */
#navigation ul li ul{
	list-style-type:none;
	margin:0px;
	padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
	border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
	display:block;
	padding:3px 3px 3px 0.5em;
	text-decoration:none;
	border-left:28px solid #a71f1f;
	border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
	background-color:#e85070;
	color:#FFFFFF;
}
#navigation ul li ul li a:hover{
	background-color:#c2425d;
	color:#ffff00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("li").find("ul").prev().click(function(){
		$(this).next().toggle(500);	//逐渐的显隐
	});
	$("li:has(ul)").find("ul").hide();
});
</script>
</head>
<body>
<div id="navigation">
	<ul id="listUL">
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a>
        	<ul>
            	<li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
		<li><a href="#">Sports</a>
        	<ul>
            	<li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>        
        </li>
		<li><a href="#">Weather</a>
        	<ul>
            	<li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
            </ul>
        </li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html>

6.使用fadeOut()和fadeIn()逐渐隐藏和显示：
<html>
<head>
<title>fadeIn()、fadeOut()方法</title>
<style type="text/css">
<!--
body{
	background:url(bg2.jpg);
}
img{
	border:1px solid #000000;
}
input{
	border:1px solid #000000;
	font-size:13px; padding:4px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
	color:#000000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:eq(0)").click(function(){
		$("img").fadeOut(3000);	//逐渐fadeOut
	});
	$("input:eq(1)").click(function(){
		$("img").fadeIn(1000);	//逐渐fadeIn
	});
	$("input:eq(2)").click(function(){
		$("img").hide(3000);	//逐渐隐藏
	});
	$("input:eq(3)").click(function(){
		$("img").show(1000);	//逐渐显示
	});
});
</script>
</head>
<body>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="Hide">
<input type="button" value="Show">
	<p><img src="02.jpg"></p>
</body>
</html>

7.fadeTo()实现隐藏和显示效果：
<html>
<head>
<title>fadeTo()方法</title>
<style type="text/css">
<!--
body{
	background:url(bg2.jpg);
}
img{
	border:1px solid #000000;
}
input{
	border:1px solid #000000;
	font-size:13px; padding:2px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
	color:#000000;
}
p{
	padding:5px;
	border:1px solid #000000;	/* 添加边框，利于观察效果 */
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:eq(0)").click(function(){
		$("img").fadeOut(1000);
	});
	$("input:eq(1)").click(function(){
		$("img").fadeIn(1000);
	});
	$("input:eq(2)").click(function(){
		$("img").fadeTo(1000,0.5);
	});
	$("input:eq(3)").click(function(){
		$("img").fadeTo(1000,0);
	});
});
</script>
</head>
<body>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">
	<p><img src="03.jpg"></p>
</body>
</html>

8.使用slideUp()和slideDown()实现隐藏和显示：
<html>
<head>
<title>slideUp()和slideDown()</title>
<style type="text/css">
<!--
body{
	background:url(bg2.jpg);
}
img{
	border:1px solid #000000;
	margin:8px;
}
input{
	border:1px solid #000000;
	font-size:13px; padding:2px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
	color:#000000;
}
div{
	background-color:#FFFF00;
	height:80px; width:80px;
	border:1px solid #000000;
	float:left; margin-top:8px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:eq(0)").click(function(){
		$("div").add("img").slideUp(1000);
	});
	$("input:eq(1)").click(function(){
		$("div").add("img").slideDown(1000);
	});
	$("input:eq(2)").click(function(){
		$("div").add("img").hide(1000);
	});
	$("input:eq(3)").click(function(){
		$("div").add("img").show(1000);
	});
});
</script>
</head>
<body>
	<input type="button" value="SlideUp">
	<input type="button" value="SlideDown">
	<input type="button" value="Hide">
	<input type="button" value="Show"><br>
	<div></div><img src="04.jpg">
</body>
</html>

9.animate()实现动画效果：
<html>
<head>
<title>animate()方法</title>
<style type="text/css">
<!--
body{
	background:url(bg2.jpg);
}
div{
	background-color:#FFFF00;
	height:40px; width:80px;
	border:1px solid #000000;
	margin-top:5px; padding:5px;
	text-align:center;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("button").click(function(){
		$("#block").animate({
			opacity: "0.5",
			width: "80%",
			height: "100px",
			borderWidth: "5px",
			fontSize: "30px",
			marginTop: "40px",
			marginLeft: "20px"
		},2000);
	});
});
</script>
</head>
<body>
	<button id="go">Go>></button>
	<div id="block">动画！</div>
</body>
</html>

10.

相关推荐