Question

我的javasctipt出了问题。基本上，它设置为隐藏两个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>

Answer 2

作为一条建议，你可以很容易地用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>

Answer 3

设置父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>

JS：

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);
});

DEMO

功能后结束javascript？

3 个答案: