Блог

Главная - Вопросы по программированию - анимация jquery: изменение непрозрачности элемента один за другим

анимация jquery: изменение непрозрачности элемента один за другим

#jquery #jquery-animate #opacity

#jquery #jquery-анимировать #непрозрачность

Вопрос:

Есть идеи, как анимировать непрозрачность каждого определенного элемента один за другим, всего до 16 целей / элементов?

Это изменит непрозрачность всех элементов вместе,

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

Взгляните сюда.

Но я хочу, чтобы непрозрачности менялись одна за другой. и это прекратится, когда он достигнет 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 /

Комментарии:

1. @alnitak, не видел, что там.. хммм

2. @Neal FWIW ваше решение, вероятно, можно было бы исправить, просто поставив .lt(16) перед .each() вызовом.

3. @alnitak хм, я добавлю это к своему ответу в качестве опции.

4. @Neal — а, это один из селекторов, который также недоступен как функция : (

5. @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"));

Пример в jsfiddle