jquery淡入淡出轉換看起來不正確

我有一個簡單的淡入淡出轉換，隱藏當前的div，而解隱藏在它下面的div。然而，當淡出發生時，轉換看起來不正確，它簡要地顯示了所有的div。我是使用jQuery的新手，所以任何人都可以向我展示如何在淡入淡出過渡發生時讓我看起來更好看一點。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); 
     } 

     }); 
});

來源

2015-04-04 TryingAtCode

你怎麼樣添加的每個按鈕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 -->

來源

2015-04-04 23:39:07 renakre

喜erkaner是的，這就是我想要的一切，我試圖用你的代碼但它不似乎工作:( – TryingAtCode 2015-04-05 18:43:36

你嘗試過時是否刪除了所有先前的代碼？我猜你不需要它們，我用新的順序更新了代碼，可以再試一次嗎？另外，你可以使用調試器來查看哪一行有問題嗎？ – renakre 2015-04-05 18:56:20

是的，我刪除了所有以前的代碼，只是使用你的，但當按鈕被點擊時沒有任何反應 – TryingAtCode 2015-04-05 19:09:25

類隱（應該有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 -->

來源

2015-04-05 00:12:16 DrKey

我想只有一個div來在同一時間是可見的，當他們按一下按鈕下一個DIV應該會出現在相同的位置，老衰落DIV – TryingAtCode 2015-04-05 18:46:36

我沒有」我明白這一點。我只是修好了，現在應該是你想要的。 – DrKey 2015-04-05 19:32:44

jquery淡入淡出轉換看起來不正確

回答

相關問題