连续循环使用的div和jQuery [英] continuous loop with divs and jquery
问题描述
我继续一个<一个href=\"http://stackoverflow.com/questions/1748656/images-sliding-continuously-with-table-and-jquery\">$p$pvious帖子，但我想我会打开一个新的线程，因为它采用了不同的方法，并有更多的实际code。无论如何，我试图让一个无限循环使用的div通过窗口滚动去（其他职位有一个形象，以下作品code）。
I'm continuing a previous post, but I thought I'd open a new thread since it takes a different approach and has more actual code. Anyway, I'm trying to get an infinite loop going with divs scrolling through a window (the other post has an image, and the code below works).
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Bleh...</title>
<style type="text/css" media="screen">
body {
padding: 0;
text-align: center;
}
#container {
width: 1000px;
padding: 10px;
border: 1px solid #bfbfbf;
margin: 0 auto;
position: relative;
}
#window {
width: 400px;
height: 100px;
padding: 10px;
border: 3px solid #666;
margin: 0 auto;
}
.box {
height: 100px;
width: 100px;
border: 1px solid #666666;
position: absolute;
z-index: -1;
}
.red { background-color: #ff6868;}
.green { background-color: 7cd980;}
.blue { background-color: #5793ea;}
.yellow { background-color: #f9f69e;}
.purple { background-color: #ffbffc;}
.cyan { background-color: #bff3ff;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
arrangeBoxes();
setInterval('shiftLeft()', 3000);
});
// arrange the boxes to be aligned in a row
function arrangeBoxes() {
$('.box').each( function(i, item) {
var position = $('#window').position().left + 3 + i * ( $(item).width() + 10 );
$(item).css('left', position+'px')
});
}
// shifts all the boxes to the left, then checks if any left the window
function shiftLeft() {
$('.box').animate({'left' : "-=100px"}, 3000, 'linear');
checkEdge();
}
// returns the new location for the box that exited the window
function getNewPosition() {
return $('.box:last').position().left + $('.box:last').outerWidth() + 10;
}
// if the box is outside the window, move it to the end
function checkEdge() {
var windowsLeftEdge = $('#window').position().left;
$('.box').each( function(i, box) {
// right edge of the sliding box
var boxRightEdge = $(box).position().left + $(box).width();
// position of last box + width + 10px
var newPosition = getNewPosition();
if ( $(box).attr('class').indexOf('red') >=0 ) {
console.log('box edge: ' + boxRightEdge + ' window edge: ' + windowsLeftEdge + ' new pos: ' +newPosition);
}
if ( parseFloat(boxRightEdge) < parseFloat(windowsLeftEdge) ) {
$(box).css('left', newPosition);
$(box).remove().appendTo('#window');
first = $('.box:first').attr('class');
console.log('first is ' + first);
}
});
}
</script>
</head>
<body id="index">
<div id="container">
<div id="window">
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box purple"></div>
<div class="box cyan"></div>
</div>
</div>
</body>
</html>
总之，问题是，我可以左右移动箱子，但我不能让领先的框弹出回行的末尾，当我跑了似的。当我单独运行的每个功能（使用Firebug） -
Anyway, the problem is that I can get the boxes to move left, but I can't get the leading box to pop back to the end of the line when I run the whole thing. When I run each function separately (using firebug) -
>> $('.box').animate({'left' : "-=100px"}, 3000, 'linear');
>> checkEdge()
它的伟大工程。当我把它们放在一起，我只是得到连续运动从右到左，直到箱子离开屏幕，因此它必须是它们如何相互作用。我希望这是有道理的（如果不是，保存上述code座为HTML文件，然后在浏览器中运行它）。我一直停留在这一段时间，所以任何帮助将是真棒。谢谢你。
It works great. When I put them together, I just get continuous motion right-to-left until the boxes leave the screen, so it must be how they interact. I hope this makes sense (if not, save the above code block as an html file and run it in a browser). I've been stuck on this for a while, so any help will be awesome. Thanks.
推荐答案
您需要设置这样的回调
$('.box').animate({'left' : "-=100px"}, 3000, 'linear', checkEdge());
checkEdge（）不是 checkEdge
点击此处查看工作溶液 http://jsbin.com/uceqi （只需复印件粘贴您的code）
Check here for a working solution http://jsbin.com/uceqi (just copy pasted your code)
这实际上是有差别，如果你离开了括号之遥。用大括号执行版本 checkEdge（）一次每动画（说实话在现实中它执行 checkEdge BEFORE动画开始的 checkEdge（）函数被调用时， $ ... animte（..）前甚至动画达到声明（）本身执行。 checkEdge 将导致函数传递作为参数，一般正确的方法去）。
Here it actually makes a difference if you leave the braces away. The version with braces executes checkEdge() once per animation (to be honest in reality it executes checkEdge BEFORE the animation starts. The checkEdge()function is called when the $...animte(..) statement is reached even before animate() itself executes. checkEdge would cause the function to be passed in as parameter, normally the correct way to go).
没有括号执行用于与选择匹配的元素数量的版本 checkEdge 一次。在这种情况下，6次。
The version without braces executes checkEdge once for the number of elements matched with the selector. In this case 6 times.
所以，从技术上讲你的做法是正确的，因为这将每个动画元素启动一次回调和在动画。
但在执行 checkEdge 一旦这显然不是什么作者的意图（检查过的div环路 checkEdge ）。同时也造成了严重的滞后，你多次循环对所有的div
So technically speaking your approach would be correct as it would fire the callback once per animated element and AFTER the animation.
But executing checkEdge once this obviously isn't what the author intended (check loop over divs in checkEdge). And also causes serious lagging as you loop several times over all divs
6divs动画 - ＆GT; 6倍回调发射 - ＆GT; 回调遍历所有div ==＆GT; 在 checkEdge（） !!
6divs animated -> 6x callback fired -> callback loops over all divs ==> 36x execution of anonymous function in checkEdge()!!
因此，实际的问题是，回调被同时烧制6倍和所有。因此，我们有一个竞争条件和动画搅乱。由于几个 checkEdge（）电话上重新定位的div同时工作。
So the actual problem is that the callback gets fired 6x and all at the same time. Thus we have a race condition and the animation messes up. As several checkEdge() calls work concurrently on repositioning the divs.
但你只注意到这一点，因为动画速度和的setInterval 的时间间隔（shiftLeft）是相同的。他们是不同的（（间隔+〜1000毫秒）>动画速度），那么它会正常工作了。但当然动画不会流体。由于 shitfLeft（）动画停止后，将火1秒。
But you only notice this because the animation-speed and the interval in setInterval (shiftLeft) are identical. Would they be different ((interval +~1000ms) > animation-speed) then it would work correctly too. But of course the animation wouldn't be fluid. As shitfLeft() would fire 1s after the animation stopped.
您可以检查此样本 http://jsbin.com/iwapi3 这说明使用的版本时，会发生什么没有括号。等待一段时间和柜台checkEdge（）调用由7每3秒增加。您还会注意到，在某些情况下，动画作品的部分和一些div移回至列表（有时）。
You can check this sample http://jsbin.com/iwapi3 which illustrates what happens when use the version without braces. Wait for sometime and the counter for checkEdge() calls increases by 7 every 3s. You will also notice that in some cases the animation partially works and some divs are moved back to end of the list (sometimes).
在某个时候点击按钮，观看用大括号的版本几运行后如何排序惹出来（不过现在颜色的正确顺序是当然搞砸了的）。而只要求 checkEdge（）每一次动画。 （击中按钮后不久，你会得到另一个+7一些回调仍然在管）
After sometime click the button and watch how the version with braces sorts the mess out after a few runs (but by now the correct order of the color is of course messed up). And only calls checkEdge() once per animation. (Shortly after hitting the button you will get another +7 as some callbacks are still in the pipe)
这篇关于连续循环使用的div和jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
