Question

任何想法,如何将每个要素的不透明性与不超过16个目标/要素联系起来?

这将共同改变各要素的不透明性,

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

查询here。

但是,我希望这种不透明性会相互改变。直至第16项内容时,这一点将停止。

页: 1

<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 );
}

感谢。

Answer 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;
});

Fiddle: http://jsfiddle.net/maniator/VS8tQ/3/

Answer 2

You can use the "completion callback" of .animate() to start the next fade:

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/“http://jsfiddle.net/alnitak/3DuTG/。

Answer 3

An option using the callback, and to stop when it reaches the 16th element you can use .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

友情链接