jq之依次显示数字5 动画4

最新推荐文章于 2021-01-13 03:54:50 发布

loyal98

最新推荐文章于 2021-01-13 03:54:50 发布

阅读量292

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/qq_39048609/article/details/77435918

版权

jq 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/jquery.min.js"></script>
	<script src="js/index.js"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>


	<div class="round-a" id="round1"></div>
	<div class="round-a" id="round2"></div>
	<div class="round-a" id="round3"></div>
	<div class="round-a" id="round4"></div>
	<div class="round-a" id="round5"></div>

	<div class="round-b" id="round6"></div>
	<div class="round-b" id="round7"></div>
	<div class="round-b" id="round8"></div>

	<div class="round-c" id="round9"></div>
	<div class="round-c" id="round10"></div>
	<div class="round-c" id="round11"></div>
	<div class="round-c" id="round12"></div>
	<div class="round-c" id="round13"></div>

	<div class="round-d" id="round14"></div>
	<div class="round-d" id="round15"></div>
	<div class="round-d" id="round16"></div>
	
	<div class="round-e" id="round17"></div>
	<div class="round-e" id="round18"></div>
	<div class="round-e" id="round19"></div>
	<div class="round-e" id="round20"></div>
	<div class="round-e" id="round21"></div>
</body>
</html>

$(function(){


$(".round-a,.round-b,.round-c,.round-d,.round-e").hide();
 // $("#round1").width("150px");
  $("#show").click(function(){
    $("#round5").fadeIn(1000);
    $("#round4").fadeIn(2000);
    $("#round3").fadeIn(3000);
    $("#round2").fadeIn(4000);
    $("#round1").fadeIn(5000);

    $("#round6").fadeIn(6000);
    $("#round7").fadeIn(7000);
    $("#round8").fadeIn(8000);

    $("#round9").fadeIn(9000);
    $("#round10").fadeIn(10000);
    $("#round11").fadeIn(11000);
    $("#round12").fadeIn(12000);
    $("#round13").fadeIn(13000);

    $("#round14").fadeIn(14000);
    $("#round15").fadeIn(15000);
    $("#round16").fadeIn(16000);

    $("#round21").fadeIn(17000);
    $("#round20").fadeIn(18000);
    $("#round19").fadeIn(19000);
    $("#round18").fadeIn(20000);
    $("#round17").fadeIn(21000);
    
  })

})

loyal98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq之依次显示数字5 动画4

Document $(function(){$(".round-a,.round-b,.round-c,.round-d,.round-e").hide(); // $("#round1").width("150px"); $("#show").click(funct
复制链接

扫一扫