jQuery动画效果相关方法

最新推荐文章于 2025-06-25 11:07:19 发布

原创最新推荐文章于 2025-06-25 11:07:19 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #Cache #CSS #Swing #ViewUI

jQuery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用jQuery实现网页上的各种动画效果，包括淡入淡出、滑动显示隐藏及自定义动画等。通过实例展示了toggle、slideDown、slideUp、fadeIn、fadeOut及animate方法的具体应用。

动画效果相关的方法

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title> 动画效果相关的方法</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	<style type="text/css">
		div {
			background-color: #cccccc;
			border: 2px solid black;
			width: 200px;
			height: 120px;
		}
	</style>
  </head>

	<body>
		<input type="button" value="toggle" onclick="$('#test1').toggle(1500);" />
		<br />
		<div id="test1">
			使用toggle控制的元素
		</div>
		<input type="button" value="slide down" onclick="$('#test2').slideDown(1500);" />
		<input type="button" value="slide up" onclick="$('#test2').slideUp(1500);" />
		<br />
		<div id="test2">
			使用Slide动画控制的元素
		</div>
		<input type="button" value="fade in" onclick="$('#test3').fadeIn(3000);" />
		<input type="button" value="fade out" onclick="$('#test3').fadeOut(3000);"/>
		<br />
		<div id="test3">
			使用Fade动画控制的元素
		</div>
	</body>
</html>

动画效果相关的方法二

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>动画效果相关的方法二</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	<style type="text/css">
		div {
			background-color: #cccccc;
			border: 2px solid black;
			width: 200px;
			height: 120px;
		}
	</style>
  </head>

	<body>
		<input id="bn1" type="button" value="执行动画" />
		<br />
		<div id="test1">
			使用toggle控制的元素
		</div>
		<script type="text/javascript">
			//为id为bn1的按钮绑定事件处理函数
			$("#bn1").click(function() {
				//为id为test1的元素指定自定义动画
					$("#test1").animate(
					//下面JavaScript对象指定动画结束时目标元素的状态
							{
								fontSize : "24pt",
								width : "300px",
								opacity : 05
							},
							//下面对象指定动画详细选项
							{
								duration : 800,
								easing : "swing",
								step : function() {
									alert('step回调！');
								}
							})
				});
		</script>
	</body>
</html>