結束javascript後功能？

我遇到了我的javasctipt問題。基本上它設置爲隱藏兩個div層，每次用戶按下一個按鈕後都會淡入。結束javascript後功能？

所以，如果他們按了一次，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>

來源

2012-12-24 Eric Haze

後y我們的HTML也是如此。 – Blender

是否有可能使[jsFiddle]（http://jsfiddle.net/）重現問題？ – Ryan

試試這個：

<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-24 04:56:40 ATOzTOA

感謝這工作很好！ :) –

正如一句忠告，你可以在短短的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-24 04:59:17

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

來源

2012-12-24 05:23:57

結束javascript後功能？

回答

相關問題