javascript - 功能后结束javascript？

Question

我的 javasctipt 有问题。基本上，它设置为隐藏两个 div 层，每次用户按下按钮时，这两个 div 层会依次淡入。

因此，如果他们按下一次，div 层 1 隐藏，div 层 2 淡入。如果他们再次按下，div 层 2 隐藏，层 3 淡入。

它工作正常，但如果用户第三次按下按钮，所有 div 都会相互叠加并全部取消隐藏。我可以阻止这种情况发生吗？

我是一个 javascript 初学者并且不太了解所以如果有人可以告诉我这会有所帮助。谢谢。

<script>
$(".modcontentnewestmore").hide();
$(".modcontentnewestmore2").hide();
$('.morebutton').click(function () {
    if ($('.modcontentnewestmore').is(":hidden")) {
         $(".modcontentnewestfirst").fadeOut(500);
         $('.modcontentnewestmore').delay(700).fadeIn(500);

    } else {

        $('.modcontentnewestmore').fadeOut(500);
              $('.modcontentnewestmore2').delay(700).fadeIn(500);



    }


  });


</script>

Answer 1

试试这个:

<script>
    $(".modcontentnewestmore").hide();
    $(".modcontentnewestmore2").hide();

    $('.morebutton').click(function () {
        if ($('.modcontentnewestfirst').is(":visible")) {
             $(".modcontentnewestfirst").fadeOut(500);
             $('.modcontentnewestmore').delay(700).fadeIn(500);

        } else if ($('.modcontentnewestmore').is(":visible")) {
            $('.modcontentnewestmore').fadeOut(500);
            $('.modcontentnewestmore2').delay(700).fadeIn(500);

        } else {
            $('.modcontentnewestmore2').fadeOut(500);
            $('.modcontentnewestfirst').delay(700).fadeIn(500);
        }
    });
</script>