Javascript 淡入多个元素，然后将它们全部淡出并替换

我不确定这在jQuery中是否可行，因为这仅仅是动画领域，但我想我应该试一试

我希望在每个onclick中都有一个部分中的多个元素淡入淡出，一旦该部分中的最后一个元素出现，在单击时使整个部分淡出，并替换为新的部分

以下是我尝试过的，但代码不起作用：

HTML

    <div class="section-0">
    <div class="fadeIn">
        <p>I should show up.</p>
    </div>
    <div class="fadeIn">
        <p>Then me, then we should both disappear when we're clicked on.</p>
    </div>
</div>
<div class="section-1">
    <div class="fadeIn">
        <p>Then I should show up next.</p>
    </div>
    <div class="fadeIn">
        <p>Followed by me, then we should both fade out too when we're clicked.</p>
    </div>
</div>

---

谢谢大家!

将JS代码替换为：

var fadeInNo = 0;
var fadeInSection = 0;

$(document).ready(function () {
    $('.fadeIn').hide();
    $(document).on('click', function () {
        if(fadeInNo == 2) {
            $('.section-' + fadeInSection).fadeOut('slow');
            fadeInNo = 0;
            fadeInSection++;
        }
        else {
            $('.section-' + fadeInSection + ' .fadeIn:eq(' + fadeInNo + ')').fadeIn('slow');
            fadeInNo++;
        }
    });
});

---

我是站着做的。在这里——

}))

这里有一种方法：

$('.fadeIn').hide().click(function () {
    if ($(this).closest('.section').find('.fadeIn:visible').length < $(this).closest('.section').find('.fadeIn').length) {
        $(this).parent().find('.fadeIn:not(:visible):first').fadeIn('slow');
    } else {
        $(this).closest('.section').fadeOut('slow', function () {
            $(this).next().find('.fadeIn:first').fadeIn();
        })
    }
});
$('.fadeIn:hidden:first').fadeIn('slow');

$（'.fadeIn'）。隐藏（）。单击（函数（）{
if（$（this）.closest（'.section'）.find（'.fadeIn:visible'）.length<$（this）.closest（'.section'）.find（'.fadeIn'）.length）{
$（this.parent（）.find（'.fadeIn:not（：visible）：first'）.fadeIn（'slow'）；
}否则{
$（this）.最近（'.section'）.fadeOut（'slow'，function（）{
$（this.next（）.find（'.fadeIn:first'）.fadeIn（）；
})
}
});
$（'.fadeIn:hidden:first'）.fadeIn（'slow'）；

---

在单击处理程序中，您可以检查只有可见的

.section-n

部分的所有

.fadeIn

元素是否可见。如果是这样，单击将隐藏该部分中的所有内容，增量n，并显示下一部分。你就快拿到了。。。

$(document).ready(function () {
$('.fadeIn:gt(0)').hide();
var $s1 = $('.section-1');
$('.section-0').on('click',function(){
    var $el = $(this);
    $el.find('>div:last-of-type').fadeIn();
    $el.on('click', function () {
        $el.fadeOut(300, function () {
            $s1.find('>div:first-of-type').fadeIn();
        });  
    });       
});
$s1.on('click',function(){
    var $el = $(this);
    $el.find('>div:last-of-type').fadeIn();
    $el.on('click', function () {
        $el.fadeOut(300);  
    });
});

$('.fadeIn').hide().click(function () {
    if ($(this).closest('.section').find('.fadeIn:visible').length < $(this).closest('.section').find('.fadeIn').length) {
        $(this).parent().find('.fadeIn:not(:visible):first').fadeIn('slow');
    } else {
        $(this).closest('.section').fadeOut('slow', function () {
            $(this).next().find('.fadeIn:first').fadeIn();
        })
    }
});
$('.fadeIn:hidden:first').fadeIn('slow');