1

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

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

3 回答 3

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>
于 2012-12-24T04:56:40.953 回答
1

作为一个忠告，您可以很容易地在 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>
于 2012-12-24T04:59:17.993 回答
0

设置父 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);
});

​<a href="http://jsfiddle.net/wa8Hr/1/" rel="nofollow">DEMO

于 2012-12-24T05:23:57.677 回答