Question

所以我正在建造一个带有4个div的非常简单的旋转木马。它使用2个jQuery函数将div设置为第一个或最后一个位置。只有alpha过渡，因为我不需要移动。

出于某种原因，虽然我可以使用.eg（n）等访问我的div，但是第一个，最后一个和其他各种数字在这个函数中不起作用。

代码：

$('#prev').click(function() {

    $('.container .divname').animate({opacity: 0}, 1000,function(){ 

     $('.container .divname:first').before($('.container .divname:last')); 

     $('.container .divname').animate({opacity: 1}, 1000); 

    });

    return false;

});

因此该功能无效。

$('#prev').click(function() {

        $('.container .divname').animate({opacity: 0}, 1000,function(){ 

         $('.container .divname:eq(0)').before($('.container .divname:eq(3)')); 

         $('.container .divname').animate({opacity: 1}, 1000); 

        });

        return false;

    });

这也行不通，但是如果我将 eq（3）更改为 eq（2）就可以了，但显然错过了我的一个div。我仍然可以访问eq（3），因为我测试了它，并使它的背景为红色。

$('.container .divname:eq(3)').css({'background-color' : '#ff0000'});

这有效......

有人可以告诉我为什么会发生这种情况吗？

Html示例如下

<html>
     <div class="container">
          <div class="divname">
               <p>some content</p>
          </div>
          <div class="divname">
               <p>some content</p>
          </div>
          <div class="divname">
               <p>some content</p>
          </div>
          <div class="divname">
               <p>some content</p>
          </div>
     </div>
</html>

修改

我现在已经为观众中的w3c小孩改变了所有的ID。问题仍然存在。

http://jsfiddle.net/3P8t5/1/

Answer 1

你的问题的根源是你已经把.before（）函数移动到附加到你的四个div的回调函数中的div - 因此它被调用四次意味着一切都被移动了四次让你回到正方形一个...并且因为它是一个如此简单的小循环，它很快并且似乎没有发生任何事情。

解决方案 - 将animate函数附加到容器;

$('#prev').click(function() {

// Fade just the container - not each placeholder meaning the callback function is only called once, not four times
$('.container').animate({
    opacity: 0
}, 1000, function() {

    $('.container .divname:eq(0)').before($('.container .divname:eq(3)'));

    // Fade back in just the container - not each placeholder
    $('.container').animate({
        opacity: 1
    }, 1000);
});
return false;
});

http://jsfiddle.net/cywjs/1/

Answer 2

除了朋友建议（Ids应该是唯一的）我在你的代码中看到拼写错误。在div标签中将"divnaname"更改为"divname"。<div id="divnaname"> ... <div>

修改

查看此演示demo

这是你想要做的吗？

jQuery .before的问题

2 个答案: