javascript – jQuery .before的问题

2023年5月29日 140次阅读

所以我正在构建一个带有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/

最佳答案 你的问题的根源是你已经把你的.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/

点赞