單擊按鈕后，一個或兩個div逐漸淡入淡出

Question

我想淡出第一個div，然后淡入下一個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);
            });
        });
    });

但是，它僅在第二個div上消失。

https://jsfiddle.net/neo3d0m2/

Answer 1

您需要在單擊功能中更改選擇器。 現在，您找到第一個塊，然后淡入淡出（第二個），您需要找到被單擊按鈕的父級，然后根據此元素執行其余的邏輯：

    $(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!')
          }

        });
      });

    });

看看這個小提琴- 小提琴