javascript延迟动画效果demo

最新推荐文章于 2023-06-21 10:11:48 发布

#麻辣小龙虾#

最新推荐文章于 2023-06-21 10:11:48 发布

阅读量1.8k

点赞数

分类专栏： web前端文章标签： js javascript web前端

本文链接：https://blog.csdn.net/CodingNoob/article/details/60957932

版权

web前端专栏收录该内容

99 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			ul{
				height:100px;
			}
			ul li{
				display:none;
				float:left;
				height:100px;
				width:200px;
				margin-right:10px;
				background:red;
				list-style:none;
			}
		</style>
	</head>
	<body>
		<div>
			<ul class="liobj">
				<li>哈哈</li>
				<li>哈哈</li>
				<li>哈哈</li>
				<li>哈哈</li>
				<li>哈哈</li>
				<li>哈哈</li>
			</ul>
			<input type="button" class="next" value="前进">
			<input type="button" class="prev" value="返回">
		</div>
		<!--按钮区 -->
		<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				~(function(obj){
				
					var Li = $(obj);
					
					$(".next").click(function(){
						if(!Li.is(":animated")){
							var time = 1000;
							for(var i = 0; i < Li.length; i++){
								Li.eq(i).delay(time);
								time += 500;
								Li.eq(i).fadeIn(2000);
							}
						}
					});
					
					$(".prev").click(function(){
						if(!Li.is(":animated")){
							var time = 1000;
							for(var i = Li.length -1; i >= 0 ; i--){
								Li.eq(i).delay(time);
								time += 500;
								Li.eq(i).fadeOut(2000);
							}
						}
					
					});
					
				})(".liobj li");
				
			});
		</script>
	</body>
</html>