Функция обратного вызова в цикле?

Question

Как получить функцию для запуска после всех fadeOuts в цикле for ниже?

Что мне нужно сделать, это затухать все, что может быть видимым, а затем переходить на определенный объект. Из-за требований к стилю мой topnav и dropdown nav находятся в разных ульсах, поэтому все сложно.

Я не очень хорошо писал свои собственные сценарии, но я (надеюсь) пропустил что-то основное.

Я пробовал обертывание вещь в функциях, но это, кажется, связывайтесь с переменным объемом и винтами вещью вверх, что я не понимаю ...

Спасибо за любую помощь!

$('.ksddtop').on('mouseenter', function(){ 
    var ddtop = $(this).text(); 
    var dd = $('.' + ddtop); 
    $('.ksddwrap').fadeIn(); 
    $(dd).fadeIn(); 

    var ksdds = $('.ksdd'); 
    for(var i = 0; i < ksdds.length; i++) { 
     var ksdd = ksdds[i]; 
     if (! $(ksdd).hasClass(ddtop)){ 
      $(ksdd).fadeOut(); 
     } 
    } 
}); 

Answer 1

Это должно сделать это, если я понимаю требования:

$('.ksdd:not(' + ddtop + ')').fadeOut().promise().done(function(){ 
    // all done fading! 
}); 

Fade все ksdd элементы, не имеют ddtop класс, затем сделайте что-нибудь, когда все будет сделано для анимации.

Дополнительная информация:

вызова .promise на коллекции JQuery дает вам обещание объект, который будет решать, когда все анимации на коллекции элементов являются полными. Сюда входят очереди анимаций.

Если вы передали функцию обратного вызова непосредственно на .fadeOut(), вы получите обратный вызов для каждого элемента, а не один после того, как все будет сделано.

Answer 2

Вместо:

var ksdds = $('.ksdd'); 
for(var i = 0; i < ksdds.length; i++) { 
    var ksdd = ksdds[i]; 
    if (! $(ksdd).hasClass(ddtop)){ 
     $(ksdd).fadeOut(); 
    } 
} 

Try:

$('.ksdd').each(function(){ 
    if (! $(this).hasClass(ddtop)){ 
     $(this).fadeOut(); 
    } 
});