jquery淡入淡出转换看起来不正确

Question

我有一个简单的淡入淡出转换，隐藏当前的div，而解隐藏在它下面的div。然而，当淡出发生时，转换看起来不正确，它简要地显示了所有的div。我是使用jQuery的新手，所以任何人都可以向我展示如何在淡入淡出过渡发生时让我看起来更好看一点。

P.S我知道了jQuery可编码更好，但我又是很新，jQuery的，所以如果任何人有编码的一种更好的方式这让我知道。

谢谢。

HTML：

<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;"> 
    <h2>Home</h2> 
    <p>DIV 1 CONTENT GOES HERE</p> 
    <button id="buttonone" type="button">Click Me!</button> 
    <!-- ... --> 
</div> 
<!-- /Home --> 

<!-- Portfolio --> 
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;"> 
    <div class="content"> 
     <h2>Portfolio</h2> 
     <p> DIV 2 CONTENT GOES HERE </p> 
     <button id="buttontwo" type="button">Click Me!</button> 
     <!-- ... --> 
    </div> 
</div> 
<!-- /Portfolio --> 

<!-- About --> 
<div id="about" class="panel" style="width:400px;height:350px;background-color:grey;"> 
    <div class="content"> 
     <h2>About</h2> 
     <p>DIV 3 CONTENT GOES HERE</p> 
     <button id="buttonthree" type="button">Click Me!</button> 
     <!-- ... --> 
    </div> 
</div> 
<!-- /About --> 

<!-- Contact --> 
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;"> 
    <div class="content"> 
     <h2>Contact</h2> 
     <p> DIV 4 CONTENT GOES HERE </p> 
     <button id="buttonfour" type="button">Click Me!</button> 
     <!-- ... --> 
    </div> 
</div> 
<!-- /Contact --> 

的jQuery：

$(document).ready(function(){ 
$("#buttonone").click(function(){ 
$("#home").fadeOut(); 
}); 
}); 

$(document).ready(function(){ 
$("#buttontwo").click(function(){ 
$("#portfolio").fadeOut(); 
}); 
}); 

$(document).ready(function(){ 
$("#buttonthree").click(function(){ 
$("#aboutfour").fadeOut(); 
}); 
}); 

$(document).ready(function(){ 
$("#buttonthree").click(function(){ 
$("#about").fadeOut(); 
}); 
}); 


$(function() { 
    $('#portfolio').addClass('hidden').hide(); 
    $('#buttonone').click(function() { 
     if ($('#portfolio').hasClass('hidden')) { 
      $('#portfolio').removeClass('hidden').fadeIn(1000); 
     } 

     }); 
}); 

$(function() { 
    $('#about').addClass('hidden').hide(); 
    $('#buttontwo').click(function() { 
     if ($('#about').hasClass('hidden')) { 
      $('#about').removeClass('hidden').fadeIn(1000); 
     } 

     }); 
}); 

$(function() { 
    $('#contact').addClass('hidden').hide(); 
    $('#buttonthree').click(function() { 
     if ($('#contact').hasClass('hidden')) { 
      $('#contact').removeClass('hidden').fadeIn(1000); 
     } 

     }); 
}); 

Answer 1

你怎么样添加的每个按钮class="button"属性，并运行下面的jQuery：

$('.button').click(function() { 
     if($(this).hasClass("hidden")) 
     { 
      //if already hidden, do you want to display it back? 
      $(this).removeClass("hidden"); 
     } 
     else{ 
      $(this).parent().parent().next().fadeIn(1000); 
      $(this).addClass("hidden"); 
      $(this).parent().parent().fadeOut(1000);//this will hide the button as well, is this okay? 
     } 
    } 
}); 

所以，当一个按钮点击包含该按钮的div将被隐藏，并且下一个div将被显示，是对？那么，一开始只会显示第一个？我不清楚功能。

UPDATE

我得到了它最后的工作。你去那里：​​

注意，我包括了家庭的div一个额外的div来让所有主要内容的div具有相同的结构。

$('.button').click(function() { 
    if($(this).next().hasClass("hidenext")) 
    {    
     $(this).parent().parent().fadeOut(1000) 
     $(this).parent().parent().next().removeClass("hidenext"); 
    } 
    else{ 
     $(this).parent().parent().fadeOut(1000); 
     $(this).parent().parent().next().addClass("hidenext"); 
    } 
}); 

HTML：

<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;"> 
    <div> 
     <h2>Home</h2> 
     <p>DIV 1 CONTENT GOES HERE</p> 
     <button class="button" id="buttonone" type="button">Click Me!</button> 
    </div> 
</div> 
<!-- /Home --> 

<!-- Portfolio --> 
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;"> 
    <div class="content"> 
     <h2>Portfolio</h2> 
     <p> DIV 2 CONTENT GOES HERE </p> 
     <button class="button" id="buttontwo" type="button">Click Me!  
     </button> 

    </div> 
</div> 

<!-- /Portfolio --> 

<!-- About --> 
<div id="about" class="panel" style="width:400px;height:350px;background- color:grey;"> 
    <div class="content"> 
     <h2>About</h2> 
     <p>DIV 3 CONTENT GOES HERE</p> 
     <button class="button" id="buttonthree" type="button">Click Me!</button>  
    </div> 
</div> 
<!-- /About --> 

<!-- Contact --> 
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;"> 
    <div class="content"> 
     <h2>Contact</h2> 
     <p> DIV 4 CONTENT GOES HERE </p> 
     <button class="button" id="buttonfour" type="button">Click Me!</button> 
<!-- ... --> 
    </div> 
</div> 
<!-- /Contact --> 

Answer 2

类隐（应该有display:none）应加时​​完成一个好的动画。如果你想十个分量DIV位置时，可以使用visibility:hidden除去给display:none通过​​

$(document).ready(function(){ 
 
    $("body > div").not("#home").addClass("hidden"); 
 
    $("button[type=button]").click(function(){ 
 
     if ($(this).parent().attr('id') == 'home') { 
 
      $(this).parent().fadeOut(1000,function(){ 
 
       $(this).addClass('hidden'); 
 
       $(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')}); 
 
      }); 
 
     } else { 
 
      $(this).parent().parent().fadeOut(1000,function(){ 
 
       $(this).addClass('hidden'); 
 
       if ($(this).next().hasClass('panel')) { 
 
        $(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')}); 
 
       } 
 
      }); 
 
     } 
 
     
 
    }); 
 
});

.hidden { display: none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="home" class="content" align="center"style="width:400px;height:200px;background-color:grey;"> 
 
    <h2>Home</h2> 
 
    <p>DIV 1 CONTENT GOES HERE</p> 
 
    <button id="buttonone" type="button">Click Me!</button> 
 
    <!-- ... --> 
 
</div> 
 
<!-- /Home --> 
 

 
<!-- Portfolio --> 
 
<div id="portfolio" class="panel" style="width:400px;height:200px; background-color:grey;"> 
 
    <div class="content"> 
 
     <h2>Portfolio</h2> 
 
     <p> DIV 2 CONTENT GOES HERE </p> 
 
     <button id="buttontwo" type="button">Click Me!</button> 
 
     <!-- ... --> 
 
    </div> 
 
</div> 
 
<!-- /Portfolio --> 
 

 
<!-- About --> 
 
<div id="about" class="panel" style="width:400px;height:200px;background-color:grey;"> 
 
    <div class="content"> 
 
     <h2>About</h2> 
 
     <p>DIV 3 CONTENT GOES HERE</p> 
 
     <button id="buttonthree" type="button">Click Me!</button> 
 
     <!-- ... --> 
 
    </div> 
 
</div> 
 
<!-- /About --> 
 

 
<!-- Contact --> 
 
<div id="contact" class="panel" style="width:400px;height:200px;background-color:grey;"> 
 
    <div class="content"> 
 
     <h2>Contact</h2> 
 
     <p> DIV 4 CONTENT GOES HERE </p> 
 
     <button id="buttonfour" type="button">Click Me!</button> 
 
     <!-- ... --> 
 
    </div> 
 
</div> 
 
<!-- /Contact -->