#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;
});
Ответ №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"));