fade два или более divs один за другим после нажатия кнопки

Question

Я хочу выпустить первый div и исчезнуть в следующем div.

Если я нажимаю на второй DIV кнопку второй DIV должен исчезать и третий ДИВ должны исчезнуть в

Я стараюсь это JS:.

$(function() { 
     var fragen_gesamt = $('.dmd-container-frage').length; 
     $('.dmd-container-frage').hide(); 
     $('.dmd-container-frage:first-child').show(); 
     $('.btn').on('click', function() { 
      $('.dmd-container-frage:first-child').fadeOut(500, function() { 
       $(this).next('.dmd-container-frage').fadeIn(1000); 
      }); 
     }); 
    }); 

Но это угасание только второй дела.

https://jsfiddle.net/neo3d0m2/

Answer 1

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

$(function() { 
     var fragen_gesamt = $('.dmd-container-frage').length; 
     $('.dmd-container-frage').hide(); 
     $('.dmd-container-frage:first-child').show(); 
     $('.btn').on('click', function() { 
     $(this).closest('.dmd-container-frage').fadeOut(500, function() { 
      var $el = $(this).next('.dmd-container-frage'); 
      // Check if there is next element 
      if ($el.length) { 
      $(this).next('.dmd-container-frage').fadeIn(1000); 
      } else { 
      alert('done!') 
      } 

     }); 
     }); 

    }); 

проверить эту скрипку - fiddle