1

javasctiptで問題が発生しています。基本的には、ユーザーがボタンを押すたびにフェードインする2つのdivレイヤーを非表示にするように設定されています。

したがって、一度押すと、divレイヤー1が非表示になり、divレイヤー2がフェードインします。もう一度押すと、divレイヤー2が非表示になり、レイヤー3がフェードインします。

正常に動作していますが、ユーザーがボタンを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);
});

<ahref = "http://jsfiddle.net/wa8Hr/1/" rel="nofollow">デモ

于 2012-12-24T05:23:57.677 に答える