单击按钮后一个一个淡化两个或多个 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

您需要在点击功能中更改选择器。现在你找到了第一个块，然后是 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 - fiddle

单击按钮后一个一个淡化两个或多个 div

fade two or more divs one by one after clicking a button

javascript

jquery

fade

fadeout

fadein