Issues with jQuery .before

所以我正在构建一个非常简单的轮播，其中包含 4 个div。它使用 2 个 jQuery 函数将div 设置为第一个或最后一个位置。只有阿尔法过渡，因为我不需要移动。

出于某种原因，虽然我可以使用 .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>

编辑：

我现在已将所有 id 更改为观众中的 w3c 孩子的班级。问题仍然存在。

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

问题的根源是你已经把你的 .before（）函数放在附加到你的四个div 的回调函数中移动div - 因此它被称为四次，这意味着一切都移动了四次，让你回到原点......因为它是如此简单的小循环，所以它很快，似乎什么都没发生。

解决方案 - 仅将动画函数附加到容器;

$('#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/

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

编辑：

查看此演示演示

这是你想做的吗？

相关内容

最新更新

热门标签：