animate的問題

jqeury animate setinterval

daneil4444 2018-06-11 18:28:36 ‧ 1065 瀏覽

分享至

這是我寫的簡單左右輪播..
目前問題很奇怪一縮小視窗換視窗過一陣子就會開始瘋狂跑
不知道是setInterval還是animate問題
想了一天還是不知道怎樣解決
麻煩jq高手幫幫忙,感謝

程式碼:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
	*{
		padding: 0;
		margin: 0
	}
	.a{
		width: 500px;height: 200px;border: 1px solid;margin: 0 auto;position: relative;overflow: hidden
	}
	.b{
		width: 500px;
		height: 200px;
		background: red;
		position: absolute
	}
	.c{
		width: 500px;
		height: 200px;
		background: blue;
		position: absolute;
		left: 500px
	}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
	$( function () {
			//抓left值
			function test2(c){
				var left = $(c).css("left");
				left = parseInt(left);
                //left值等於-500px跳回500px
				if(left==-500){
				$(c).css("left","500px");
			    }
			}
			//左移動500px
			function test(a,b){
				$(a).animate({"left": "-=500px"},1000,function(){
					test2(a);
				});
				$(b).animate({"left": "-=500px"},1000,function(){
					test2(b);
				});
			}
			timer = setInterval(function(){
				test("#n1","#n2")
			},3000)
		})
	</script>
</script>
</head>

<body>
	<div class="a">
		<div id="n1" class="b"></div>
		<div id="n2"  class="c"></div>
	</div>
</body>
</html>