gpt4 book ai didi

javascript - jQuery .before 的问题

转载 作者:搜寻专家 更新时间:2023-10-31 08:47:42 25 4
gpt4 key购买 nike

因此,我正在构建一个非常简单的带 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 children 的所有 ID 更改为 class。问题仍然存在。

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/

关于javascript - jQuery .before 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13534491/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com