关于if循环问题，有点长，求有空的大神解答一下

jlx5986395 2017-03-20 08:59:39

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#ul1{
list-style: none;
width: 300px;
height: auto;
float: left;
border-top: 1px solid #000000;
margin:20px;
}
li{
width: 100%;
height: 30px;
overflow: hidden;
position:relative;
border-bottom: 1px dashed #333333;
line-height: 30px;
}
li div{
position:absolute;
top:-30px
}
li div p{
height: 30px;
}
</style>
</head>
<body>
<ul id="ul1">
<li>
<div>
<p>11111111111</p>
<p>22222222222</p>
</div>
</li>
<li>
<div>
<p>33333333333</p>
<p>44444444444</p>
</div>
</li>
<li>
<div>
<p>55555555555</p>
<p>66666666666</p>
</div>
</li>
<li>
<div>
<p>77777777777</p>
<p>88888888888</p>
</div>
</li>
<li>
<div>
<p>99999999999</p>
<p>aaaaaaaaaaa</p>
</div>
</li>
<li>
<div>
<p>bbbbbbbbbbb</p>
<p>ccccccccccc</p>
</div>
</li>
</ul>
</body>
<script src="../jQueryUI/jquery-3.1.1.min.js"></script>
<script>
$(function () {
var i=0;
var But=true;
setInterval(function () {

var int=setInterval(function () {

if(But){
$('div').eq(i).animate({top:0},'slow');
i++;
}
else if(!But){
$('div').eq(i).animate({top:-30},'slow');
i++;
}
else if(i==$('div').length){
clearInterval(int);
i=0;
But=!But;
}

},400);},1000)
})
</script>
</html>
这是一个百叶窗效果，js部分为什么上面参数为1000的定时器会实效，而下面的我把if和else的位置调整了一下，又可以执行，想不通，头都大了；下面的是可以执行的
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<script>
$(function () {
var i=0;
var But=true;
setInterval(function () {

var int=setInterval(function () {

if(i==$('div').length){
clearInterval(int);
i=0;
But=!But;
}
else if(But){
$('div').eq(i).animate({top:0},'slow');
i++;
}
else if(!But){
$('div').eq(i).animate({top:-30},'slow');
i++;
}

},400);},1000)
})
</script>

...全文

185 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

蚂蚁上树 2017-03-22

打赏
举报

waqxy 2017-03-21

打赏
举报

第一段中，逻辑错在else if(!But){}和else if(i==$('div').length){}永远都进不去，因为你把But定义为true，所以它只会一直进 if(But){}这里

jlx5986395 2017-03-21

打赏
举报

引用 1 楼 Free_Wind22 的回复:

第一段你的逻辑有问题,最后一个 else if(i==$('div').length){永远不会执行 if(But) if(!But) 也没必要这样判断,But为true,下一个!But肯定是false 弄简单点
$(function(){
			var down = true;
			setInterval(function(){
				$("div").animate({top: down ? 0 : -30}, 'slow');
				down = !down;
			}, 1000);
		});

------------------------------------------------------------------------------------------- 感谢您的回答，但是逻辑错在了哪儿呢，我脑子笨，想不通啊，有空的话能不能细说一下？

囧 2017-03-21

打赏
举报

第一段你的逻辑有问题,最后一个 else if(i==$('div').length){永远不会执行 if(But) if(!But) 也没必要这样判断,But为true,下一个!But肯定是false 弄简单点


$(function(){
			var down = true;
			setInterval(function(){
				$("div").animate({top: down ? 0 : -30}, 'slow');
				down = !down;
			}, 1000);
		});

jlx5986395 2017-03-21