函数后结束javascript？

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

因此，如果他们按下一次，div layer 1将隐藏，div layer 2将淡入。如果他们再次按下，div layer 2将隐藏，layer 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>

$（“.modcontentnewestmore”）.hide（）；
$（“.modcontentnewestmore2”）.hide（）；
$（'.morebutton'）。单击（函数（）{
如果（$（'.modcontentnewestmore'）。是（“：hidden”））{
$（“.modcontentnewestfirst”）.fadeOut（500）；
$（'modcontentnewestmore'）.delay（700）.fadeIn（500）；
}否则{
$（'modcontentnewestmore'）。淡出（500）；
$（'.modcontentnewestmore2'）.delay（700）.fadeIn（500）；
}
});

试试这个：

<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>

$（“.modcontentnewestmore”）.hide（）；
$（“.modcontentnewestmore2”）.hide（）；
$（'.morebutton'）。单击（函数（）{
如果（$（'.modcontentnewestfirst'）。是（“：可见”））{
$（“.modcontentnewestfirst”）.fadeOut（500）；
$（'modcontentnewestmore'）.delay（700）.fadeIn（500）；
}如果（$（'.modcontentnewestmore'）为（“：可见”），则为else{
$（'modcontentnewestmore'）。淡出（500）；
$（'.modcontentnewestmore2'）.delay（700）.fadeIn（500）；
}否则{
$（'modcontentnewestmore2'）。淡出（500）；
$（'.modcontentnewestfirst'）.delay（700）.fadeIn（500）；
}
});

作为一条建议，您可以很容易地用css和html完成这项工作，并且避免在javascript被阻止的浏览器中进行任何故障排除

<style type='text/css'>
div.div1{
    position:absolute;
    width:100px;
    height:100px;
    background:rgb(240,240,240);
    border:1px solid rgb(220,220,220);
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    opacity:0;
}
div.div2{
    position:absolute;
    width:100px;
    height:100px;
    background:rgb(240,240,240);
    border:1px solid rgb(220,220,220);
    transition:all 500ms 700ms ease;
    -moz-transition:all 500ms 700ms ease;
    -webkit-transition:all 500ms 700ms ease;
    -o-transition:all 500ms 700ms ease;
}
input.button:checked~div div.div1{
    opacity:1;
    transition:all 500ms 700ms ease;
    -moz-transition:all 500ms 700ms ease;
    -webkit-transition:all 500ms 700ms ease;
    -o-transition:all 500ms 700ms ease;
}
input.button:checked~div div.div2{
    opacity:0;
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}
</style>
<input class='button' type='checkbox'/>
<div>
    <div class='div1'>
        div 1
    </div>
    <div class='div2'>
        div 2
    </div>
</div>

第1分部{
位置：绝对位置；
宽度：100px；
高度：100px；
背景：rgb（240240）；
边框：1px实心rgb（220220）；
过渡：所有500ms缓解；
-moz转换：所有500毫秒的易用性；
-webkit转换：所有500毫秒易用性；
-o型过渡：所有500毫秒的缓解；
不透明度：0；
}
第2分部{
位置：绝对位置；
宽度：100px；
高度：100px；
背景：rgb（240240）；
边框：1px实心rgb（220220）；
过渡：所有500毫秒至700毫秒缓变；
-moz转换：所有500ms 700ms的易用性；
-webkit转换：所有500ms 700ms的易用性；
-o型转换：所有500毫秒至700毫秒的易用性；
}
输入按钮：选中~div div.div1{
不透明度：1；
过渡：所有500毫秒至700毫秒缓变；
-moz转换：所有500ms 700ms的易用性；
-webkit转换：所有500ms 700ms的易用性；
-o型转换：所有500毫秒至700毫秒的易用性；
}
输入按钮：选中~div div.div2{
不透明度：0；
过渡：所有500ms缓解；
-moz转换：所有500毫秒的易用性；
-webkit转换：所有500毫秒易用性；
-o型过渡：所有500毫秒的缓解；
}
第一组
第2组

设置父div（我的示例中的modcontent类），然后根据可见元素切换它们：

HTML:

---

​

有没有可能制造一个复制问题的模型？

<div class="modcontent">
  <div class="modcontentnewestfirst">modcontentnewestfirst</div>
  <div class="modcontentnewestmore">modcontentnewestmore</div>
  <div class="modcontentnewestmore2">modcontentnewestmore2</div>
</div>
<button class="morebutton">morebutton</button>​

var modcontent = $('.modcontent');
modcontent.children().hide().first().show();
$('.morebutton').click(function() {
    var current = modcontent.children(':visible');
    var next = current.next()
    if (next.length === 0) next=modcontent.children().first();
    current.stop().fadeOut(500);
    next.stop().hide().delay(700).fadeIn(500);
});