Javascript 间歇停止动作的循环

我一直在努力学习一些网页设计的基础知识，包括一些简单的HTML、CSS、JS/Jquery，但遇到了一些我无法解决的障碍

我尝试实现的一件事情是旋转少量的div。由于缺乏适当的方式，我所做的就是：关闭其中一个，同时切换另一个隐藏在页面加载中的div

虽然这不是最漂亮的东西，但它还是有点起作用，尽管奇怪的是，它在循环停止之前只起了两次作用

function moveSide(){
    var intervalId;
    var childCount = 2;
    var preLast = childCount + 2;
    var newLast = childCount + 3;

    intervalId = setInterval(function () {
        $(".column:nth-of-type(" + childCount + ")").toggle("slide", function(){
            $(".column:nth-of-type(" + preLast + ")").removeClass("last").delay(1, function(){
                $(".column:nth-of-type(" + newLast + ")").addClass("last").delay(1).toggle("slide", function(){
                    childCount++;
                    preLast = childCount + 2;
                    newLast = childCount + 3;
                    //alert(childCount);
                });
            });
        });
    },5000);
}

我不确定使用

nth类型的
是否是正确的选择，但它似乎允许我在div中进行选择
childCount
是选择哪个div是第一个被关闭的div，
pre（vious）Last
是识别显示的div中的最后一个div，以便删除用于某些属性的类，
newLast
是识别将变为可见的div，并为其提供添加CSS属性的类

警报周期完全运行两次（增加
childCount
），但不处理第三次

知道我做错了什么吗？
我现在不知道，如果是因为我的感冒没有治好，或者是因为我几个小时前刚起床，但我不明白你的代码

据我所知，这是你想要实现的——我建议另一种方法：

$(".column:gt(0)").hide(); //first of all, hide all columns but the first one

setInterval(function() { 
$('.column:first')                //select the first column
  .toggle("slide")                //slide it out
  .next().next()                  //select the 3rd column
  .toggleClass("last")            //remove class "last"
  .next()                         //select first invisible column    
  .toggleClass("last")            //add class last
  .toggle("slide")                //slide it in
  .end().end().end()              //end the chain, to reselect the first element 
             // since we used .next() three times, we have to end it three times
  .appendTo('#column-content');   //move the first element inside the dom to the end
},  5000);

您的间隔现在应该是无限的-总是从第一个元素滑出，滑入下一个元素末尾，将第一个元素附加到末尾。因此，当前元素始终是第一个。。。
看小提琴：
你在这里想达到什么目的？是菜单还是什么？你能找到另一个网站的例子吗？从表面上看，这太复杂了。另外，您能提供一个或一些HTML吗？它可能比它需要的要复杂得多，因为我可能不是用Jquery提供的最好方式来解决这个问题。我试图在上设置一些东西，但似乎缺少一些东西，因为它不起作用，尽管这几乎是我试图在我的网站上设置的东西。我真的不记得有任何特定的网站使用过这个，所以我不能给它举个例子，但我的想法是3个div总是可见的，一个切换关闭，另一个从7个左右的组中切换进来，最后它们会轮换。谢谢你的回复。如果没有其他东西的话，这显然是一种简单得多的方法，但是当您尝试在粘贴时使用代码时，第一列是在每个循环中切换出和。我的意图是一次显示3列，但我可以解决这个问题，因为第一列一直被回调，根据您的代码注释，这是不应该发生的。您能将相关的html标记发布到您的代码中吗？或者提供一个JSFIDLE？我还没有用切换幻灯片测试它，但使用了fadeIn/fadeOut功能。只是想，它可能会工作，虽然-因为你只改变动画。使用JSFIDLE，我可以通过控制台检查dom get是否正确处理。接下来，如果您希望一次显示3列，那么切换应该如何占用空间？您想切换显示的所有3列，还是只滑动第一列，将第二列移动到第一个位置，将第三列移动到第二个位置，并将新显示的第四列移动到第三个位置？之前我已经提出了这一点，这是我想要影响的小贴士。在jsbin上试过了，它是“功能性的”，表现与完整的东西一样。我的混乱代码只工作了两次，而你的代码只切换了第一个元素。如果需要其他信息，一定要让我知道，我不知道我需要或不需要在这些信息中提供什么。好吧，谢谢你的帮助，现在我知道了，为什么它不适合你。你听说过选择器吗？您刚刚复制了我的代码，我的append函数使用了一个选择器，它没有出现在您的标记中。这就是为什么我要你的html。我在你的小提琴中构建了我的链条，使用了正确的选择器-看看它（链接在解决方案中）