Есть ли способ добавить обратный вызов к каждому утверждению?

Question

У меня есть группа из пяти элементов, которые при нажатии: исчезают в последовательном порядке, загружают новое фоновое изображение, соответствующее щелчку элемента, а затем кроссфейды на новый фон.

Я пытаюсь ввести новый контент после загрузки нового фона через ajax. Проблема в том, что он перебирает ВСЕ 5 элементов и запускает функцию 4 в другое время, в отличие от одного элемента, который нажат.

<script> 

    $('.actor-img').click(function(e) { 
    e.preventDefault(); 

      // First remove a 'selected' class from all elements with this class name 
     $('.actor-img').removeClass('selected'); 

      // Add 'selected' class to the one that was clicked 
     $(this).addClass('selected'); 

      // Loop thru all the elements w/ this class name 
      // The variable 'v' will represent the actual element in each loop 
     $('.actor-img').each(function(i,v) { 

       // If this element doesn't have 'selected' class, hide it 
      if(!$(v).hasClass('selected')) { 

        // hide it! 
        $(v).hide(); 

        // or, to fade out, comment out the above and uncomment below 
        $(v).fadeOut('slow',function(){$('.page-section').load('tail_one_frame_one.html');}); 

       var paras = $('.actor-img'), 
         i = 0; 

        // If using jQuery 1.4, you don't need to do || []. 
        (function() { 
         $(paras[i++] || []).fadeOut('slow', arguments.callee); 
        })(); 



       // This item IS selected, so change the background accordingly 
       } else { 

        // the NEW bg class was stored in the div as data-bg 
        // get it, and save as newClassName 
        var newClassName = $(v).attr('data-bg'); 

        // First reset to just .page-section-img 
        // Then add the new class (to change the background) 
       $('.page-section-img').attr('class','page-section-img').addClass(newClassName); 

       } 


      }); 

    }); 

</script> 

Answer 1

Я бы сделал следующую рекурсивную функцию.

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

var elements = $('.actor-img'); 
elementIndex = 0; 

fadeElements(elements[elementIndex]); 

var fadeElements = function(element) { 
    $(element).fadeOut('slow', function() { 
     if (elementIndex++ < elements.length - 1) {   
      fadeElements(elements[elementIndex]; 
     } 
    }); 
};