javascript - 使用 jquery 同时（和速率）旋转两个 div 的内部元素

Question

我试图给两个元素一个匹配的旋转动画，我希望它们以相同的速度旋转并每次都落在一个“匹配”的集合上。我可以让两个元素都旋转，但变量会运行两次，从而丢弃匹配对。

我尝试为每个元素设置不同的函数，并将变量更改为引导，但没有成功。在最新的代码迭代中，我正在尝试使用“this”变量，但在使用其他变量时仍然遇到困难，导致每个项目被计算两次。

检查Fiddle Here或下面的代码片段（console.log已评论）：

$(document).ready(function () {
    function moveTo(val) {
        val = -val % 300;
        if (val > 0) val -= 300;
        $(this).css({
            top: val
        });
    }

var i = 0;
    function spin(count) {
	    var list = $(this).find('.viewbox ul');
	    //console.log(list);
	    var firstItem = list.find('.viewbox li:first');
	    firstItem.clone().appendTo(list);
 
        $('.slots').stop().animate({
            top: -300
        }, 600, 'linear', function () {
            if (count == 0) {
	            i++
	            if (i <= 5){
                var slot = count * 6 + i,
                    top = -slot * 50,
                    time =  600 * slot / 6;
                //console.log(count, slot, top, time)
                $(this).css({
                    top: 0
                }).animate({
                    top: top
                },time)//, 'easeOutQuad')
                } else {i = 0}
            } else {
                $(this).css({
                    top: 0
                })
                spin(count - 1)
            };
        });
    }

	function spinTheThing(stop) { 
	    $('.slots').css({
	            top: 0
	        }) 
			spin(1)
		}		
			
	(function(count) {
	    if (count < 7) {
	        spinTheThing();
	        var caller = arguments.callee;
	        window.setTimeout(function() {
	            caller(count + 1);
	        }, 4000);    
	    }
	})(0);

});

.viewbox{
    overflow: hidden;
    height: 50px;
    border: solid 1px #000;
    position: relative;
    display: inline-block;
    }
.viewbox .wrapper{
    position: relative;
}
.viewbox ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.viewbox li{
    display: block;
    width: 300px;
    height: 50px;
    text-align: center;
    font-size: 30px;
}

<script src="https://code.jquery.com/jquery-1.10.1.min.js" integrity="sha256-SDf34fFWX/ZnUozXXEH0AeB+Ip3hvRsjLwp6QNTEb3k=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha256-H3cjtrm/ztDeuhCN9I4yh4iN2Ybx/y1RM7rMmAesA0k=" crossorigin="anonymous"></script>

<h1>
<span> Less </span>
<div class="viewbox">
	<div class="wrapper slots" id="slotmachine">
		<ul>
			<li style="background:#f00">"I can't"</li>
			<li style="background:#ff0">NO</li>
			<li style="background:#0f0">Huh?</li>
			<li style="background:#0ff">4</li>
			<li style="background:#00f">5</li>
			<li style="background:#f0f">6</li>
		</ul>
	</div>
</div>
<h1>

<h1>
<span> Less </span>
<div class="viewbox">
	<div class="wrapper slots" id="slotmachine2">
		<ul>
			<li style="background:#f00">"I can"</li>
			<li style="background:#ff0">YES</li>
			<li style="background:#0f0">YEAH!</li>
			<li style="background:#0ff">42</li>
			<li style="background:#00f">52</li>
			<li style="background:#f0f">62</li>
		</ul>
	</div>
</div>
<h1>