Перебор дочерних элементов по одному - PullRequest
Новая
       4

Перебор дочерних элементов по одному

3 голосов
/ 29 апреля 2011

, как гласит заголовок, я пытаюсь перебрать коллекцию дочерних элементов, проблема возникает, когда я пытаюсь постепенно исчезать из них, я использую $.each(), чтобы попытаться достичь этого, но этокажется, что все постепенно исчезает, я хотел бы дождаться завершения анимации, а затем перейти к следующему дочернему элементу и исчезнуть, вот мой код,

jQuery: 

var children = $("container").children();

children.each(function(){
    $(this).fadeOut('slow');
})

HTML: 

<div id="container">
    <div style="background: #F00;"></div>
    <div style="background: #00F;"></div>
    <div style="background: #0F0;"></div>
</div>

Также возможно ли запустить анимацию до завершения текущей, но с задержкой на заданный интервал?

Заранее спасибо!

Ответы [ 5 ]

14 голосов
/ 29 апреля 2011

Вот немного другой подход:

Создайте массив всех дочерних элементов, в отличие от вашего исходного кода, который использовал объект jQuery. 

var children = [];
$("#container").children().each(function() {
    children.push(this);
});

Создайте функцию, которая извлекает один элемент за раз из массива и анимирует его, рекурсивно вызывая себя как функцию обратного вызова, чтобы она выполнялась только ПОСЛЕ завершения предыдущей анимации. 

function fadeThemOut(children) {
    if (children.length > 0) {
        var currentChild = children.shift();
        $(currentChild).fadeOut("slow", function() {
            fadeThemOut(children);
        });
    }
}

См. Рабочую демонстрацию по jsFiddle .

Надеюсь, это поможет!

2 голосов
/ 29 апреля 2011

Хотите ли вы исчезнуть один за другим после предыдущего финиша?

См. Этот пример на jsFiddle 

el.fadeOut("slow", function() {
    // Fade next (see example)
});

Ссылка для fadeOut 

.fadeOut( [ duration ], [ callback ] )
- duration: A string or number determining how long the animation will run.
- callback: A function to call once the animation is complete.
1 голос
/ 29 апреля 2011

Я думаю, вы захотите использовать что-то вроде $.queue, так что вы не будете вручную выбирать продолжительность и синхронизировать всю свою анимацию самостоятельно. $.queue документация jQuery, связанная с этим вопросом о переполнении стека, которое должно указывать вам в правильном направлении.

1 голос
/ 29 апреля 2011

Добавьте возрастающее значение delay для каждого последующего замирания: 

var children = $("container").children();

var delayInterval = 0;
children.each(function(){
    if (delayInterval > 0) $(this).delay(delayInterval);
    $(this).fadeOut('slow');
    delayInterval += 300;
})

Возможно, вам потребуется отрегулировать приращение задержки в соответствии с вашими потребностями.

0 голосов
/ 29 апреля 2011

Укажите собственные идентификаторы вашего DIV, и затем вы сможете пересчитать идентификаторы и постепенно исчезать по одному. Например:

var children = $ ("container"). Children (). Each (function () {

для (var k = 0; k <$ (this) .attr ('id'). Length; k ++) {<br> $ (Это) .attr ( 'ID', $ (это) .attr ( 'ID')); }

$ (это) .attr ( 'ID') Затухание ( 'медленно'). });

...