fade动画 jquery jquery动画效果代码

转载

编程小匠人 2023-07-11 14:36:09

文章标签 jQuery jQuery整理 jQuery动画前端jQuery框架 文章分类 代码人生

jQuery 动画（动起来）

显示、隐藏、开关滑动、淡入、淡出，还有自定义动画

fade动画 jquery jquery动画效果代码_jQuery整理

基本动画（show、hide和toggle）

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

show、hide很好理解就是显示隐藏，toggle是开关，显示被隐藏的元素，并隐藏已显示的元素

它们都接受可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

可选的 callback 参数是隐藏或显示完成后所执行的函数名称

<html>
	<head>
		<title>JQuery Animation</title>
		<style type="text/css">
        div{
					width: 200px;
					height: 100px;
					background-color: yellow;
				}
		</style>
	</head>
	<body>
		<button id="bt1" type="button">show</button>
		<button id="bt2"type="button">hide</button>
		<button id="bt3"type="button">toggle</button>
		<div >这是一个段落。</div>

	</body>
	<script src="../../js/jquery-3.2.1.min.js"></script>

	<script type="text/javascript">
		$("document").ready(function() {
			$("#bt1").click(function() {
				$("div").show(1000);
			});
			$("#bt2").click(function() {
				$("div").hide(2000);
			});
			$("#bt3").click(function() {
				$("div").toggle();
			});
		});
	</script>
	<!-- <script src="/js/jquery-latest.js"></script> -->
</html>

fade动画 jquery jquery动画效果代码_前端jQuery框架_02

默认以对角线方向就行展示隐藏

预制动画（slide和fade）

jQuery 拥有以下三种slide方法：

slideDown() //向下滑动元素
slideUp() //向上滑动元素
slideToggle() // slideDown() 与 slideUp() 方法之间进行切换

$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

如果元素向下滑动，则 slideToggle() 可向上滑动它们
如果元素向上滑动，则 slideToggle() 可向下滑动它们

<html>
	<head>
		<title>JQuery Animation</title>
		<style type="text/css">
        div{
					width: 200px;
					height: 100px;
					background-color: yellow;
				}
		</style>
	</head>
	<body>
		<div class="result">Hello Wolrd</div>
		<button>Click 1</button>
	</body>
	<script src="../../js/jquery-3.2.1.min.js"></script>

	<script type="text/javascript">
		$("document").ready(function() {
			$('button').on('click', function() {
				$('.result').slideUp('1000', function(){
					$('.result').slideDown('fast');
				});
			});
		});
	</script>
	<!-- <script src="/js/jquery-latest.js"></script> -->
</html>

fade动画 jquery jquery动画效果代码_jQuery_03

一秒的时间从下到上收完，再以很快的速度放下，slidedown()是在slideup()函数的回调函数，表示当slideup()完成后执行slidedown()

Query 拥有下面四种 fade 方法：

fadeIn() //淡入已隐藏的元素
fadeOut() //淡出可见元素
fadeToggle() // fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo() //允许渐变为给定的不透明度（值介于 0 与 1 之间）

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeToggle(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

<html>
	<head>
		<title>JQuery Animation</title>
		<style type="text/css">
			.result1 {
				width: 200px;
				height: 100px;
				background-color: yellow;
				margin-bottom: 50px;
			}
			.result2 {
				width: 200px;
				height: 100px;
				background-color: blue;
				margin-bottom: 50px;
			}
		</style>
	</head>
	<body>
		<div class="result1">Hello Wolrd</div>
		<div class="result2">Hello Wolrd</div>
		<button class="btn1">Click 1</button>
		<button class="btn2">Click 2</button>
	</body>
	<script src="../../js/jquery-3.2.1.min.js"></script>

	<script type="text/javascript">
		$("document").ready(function() {
			$('.btn1').on('click', function() {
				$('.result1').fadeOut('normal', function() {
					$('.result1').fadeIn('slow');
				});
			});
			$('.btn2').on('click', function() {
				$('.result2').fadeTo('normal', 0.5);
			});
		});
	</script>
	<!-- <script src="/js/jquery-latest.js"></script> -->
</html>

fade动画 jquery jquery动画效果代码_jQuery整理_04

自定义动画（animate）

jQuery animate() 方法用于创建自定义动画

$(selector).animate({params},speed,callback)

必需的 params 参数定义形成动画的 CSS 属性
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒
可选的 callback 参数是动画完成后所执行的函数名称

<html>
	<head>
		<title>JQuery Animation</title>
		<style type="text/css">
		  .block {
		      position: relative;
		      background-color: #abc;
		      width: 40px;
		      height: 40px;
		      float: left;
		      margin: 5px;
		  }
		</style>
	</head>
	<body>
		<div class="block"></div>
		<div class="block"></div>
		<div class="block"></div>
		<div class="block"></div>
		<div class="block"></div>
		<div class="block"></div>
		<br/><br/><br/>
		<button>click</button>
	</body>
	<script src="../../js/jquery-3.2.1.min.js"></script>

	<script type="text/javascript">
		$("document").ready(function() {
        $("button").click(function(){
            $( ".block:first" ).animate({
                left: 100
            }, {
                duration: 1000,
                step: function( now, fx ){
                    $( ".block:gt(0)" ).css( "left", now );
                }
            });
        });
		});
	</script>
	<!-- <script src="/js/jquery-latest.js"></script> -->
</html>

fade动画 jquery jquery动画效果代码_jQuery动画_05

这个例子是让一排矩形都向右移动100px

默认地，所有 HTML 元素都有一个静态位置，且无法移动

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等

jQuery 提供针对动画的队列功能

<html>
	<head>
		<title>JQuery Animation</title>
		<style type="text/css">
			div {
				width:100px;
				height:100px;
				background:#98bf21;
			  position:absolute;
			}
		</style>
	</head>
	<body>
		<button>click</button>
		<div></div>
	</body>
	<script src="../../js/jquery-3.2.1.min.js"></script>

	<script type="text/javascript">
		$("document").ready(function() {
			$("button").click(function() {
				var div = $("div");
				div.animate({
					height: '300px',
					opacity: '0.4'
				}, "slow");
				div.animate({
					width: '300px',
					opacity: '0.8'
				}, "slow");
				div.animate({
					height: '100px',
					opacity: '0.4'
				}, "slow");
				div.animate({
					width: '100px',
					opacity: '0.8'
				}, "slow");
			});
		});
	</script>
	<!-- <script src="/js/jquery-latest.js"></script> -->
</html>

fade动画 jquery jquery动画效果代码_jQuery整理_06