jQuery: 使用fadeToggle()制作闪烁效果小动画

 根据上节课学到的jquery动画效果,结合js中的window.setInterval()函数制作闪烁效果小动画。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style>
		div {
			float: left;
			height: 50px;
			width: 50px;
			background: #ff0;
			margin: 2px;
		}
	</style>
	
</head>
<body>
    <div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
	<div id="div4"></div>
	<div id="div5"></div>
	<div id="div6"></div>
	<div id="div7"></div>
    <button id="btn">开始闪烁</button>
    <script type="text/javascript">
	$(document).ready(function() {
	    //定义一个闪烁函数,为每个div元素添加闪烁效果,为了使每个div闪烁的时间不一样,这里使用了
        //Math.random()函数
        var blink=function(){
	     	for (var i = 0; i < 6; i++) {
	           	$("#div"+i).fadeToggle(500*(Math.random()*10+1));
	           }
	     }
	     //使用定时器,保证闪烁效果能够持续触发
         window.setInterval(function(){
	    	$("#btn").click(function(){	    	
	          blink ();  			
    	    });
	    },0);
	 </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/willard_cui/article/details/81292742