Question

一直在尝试学习一些涉及一些简单的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-of-type是否是正确的选择，但它似乎允许我在div中选择。 childCount是选择要切换的第一个div，pre(vious)Last用于标识显示的最后一个div，以便删除用于某些属性的类，{{1}用于标识将变为可见的div，并为其添加类以添加CSS属性。

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

任何想法我做错了什么？

Answer 1

我现在不知道，如果这是我未治好的感冒或事实，我几小时前刚起床，但我不明白你的代码。

我理解的是你想要达到的目标 - 我建议采用另一种方法：

$(".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);

你的间隔现在应该是无限的 - 总是滑出第一个元素，在下一个元素末尾滑动，将第一个元素追加到末尾。因此，当前元素始终是第一个...... 看小提琴：http://jsfiddle.net/sv5j85df/2/

间隔停止动作的循环

1 个答案: