jquery animate：一一改变元素的不透明度

Posted 2023-03-06

【中文标题】jquery animate：一一改变元素的不透明度

【英文标题】：jquery animate: change the element's opacity one by one

【发布时间】：2011-08-29 18:10:20

【问题描述】：

知道如何将每个特定元素的不透明度一一设置为最多 16 个目标/元素的动画吗？

这将改变元素的不透明度，

$('.block-item').animate(
        opacity:0
    ,500);

看看here。

但我希望不透明度一个接一个地改变。当它到达第 16 个元素时，这将停止。

这里是html，

<div id="parent_container">

<div class="block-item">1</div>
<div class="block-item">2</div>
<div class="block-item">3</div>
<div class="block-item">4</div>
<div class="block-item">5</div>
<div class="block-item">6</div>
<div class="block-item">7</div>
<div class="block-item">8</div>
<div class="block-item">9</div>
<div class="block-item">10</div>
<div class="block-item">11</div>
<div class="block-item">12</div>
<div class="block-item">13</div>
<div class="block-item">14</div>
<div class="block-item">15</div>
<div class="block-item">16</div>
<div class="block-item">17</div>
<div class="block-item">18</div>

</div>

我推出了这个功能，但它会使任何浏览器崩溃，

function opacity_test(index)

    $('.block-item').eq( index ).animate(
        opacity:0
    ,500);

    setInterval( function() 
        opacity_test(index + 1);
    , 1000 );

谢谢。

【参考方案1】：

试试这个：

var delay = 0;
$('.block-item:lt(16)').each(function() 
               //^^ do for every instance less than the 16th (starting at 0)
    $(this).delay(delay).animate(
        opacity:0
    ,500);
    delay += 500;
);

小提琴：http://jsfiddle.net/maniator/VS8tQ/3/

【参考方案2】：

你可以使用.animate()的“完成回调”来开始下一次淡入淡出：

function fade(index) 
    $('.block-item').eq(index).animate(
        opacity: 0
    , function() 
        // on completion, recursively call myself
        // against the next element
        if (index < 15) 
            fade(index + 1);
        
    )


fade(0);

见http://jsfiddle.net/alnitak/3DuTG/

【讨论】：

@alnitak，没看到那里.. 嗯

@Neal FWIW 您的解决方案可能只需将.lt(16) 放在.each() 调用之前即可解决。

@alnitak 嗯，我会把它作为一个选项添加到我的答案中。

@Neal - 啊，这是不能作为函数使用的选择器之一:(

@alnitak，我将它添加到选择器中

【参考方案3】：

一个使用回调的选项，当它到达第 16 个元素时停止你可以使用.index()

var f = function($current) 
    $current.animate(
        opacity: 0
    , function() 
        if ($current.next(".block-item").index() < 15) 
            f($current.next(".block-item"));
        
    );
;

f($(".block-item:first"));

Example on jsfiddle