無論是使用jQuery的或純JavaScript以淡入淡出和

這是我所使用計算器的第一次，所以我來到這裏。無論是使用jQuery的或純JavaScript以淡入淡出和

我創建了導航網站，目前，我已創建的按鈕。默認情況下（主頁）使用JavaScript顯示幻燈片，並且這些都包含在div中。

當我點擊，讓我們說的「關於我」頁面，我想該div淡出，另一格褪色，其中將包含圖片和文字。

這裏是我的代碼：

<body> 
    <div id="top_wrapper"> 
     <a class="button navigation" id="homeBtn">Home</a> 
     <a class="button navigation" id="aboutBtn">About Me</a> 
     <a class="button navigation" id="coachBtn">Peronsal, Business and Professional Coaching</a> 
     <a class="button navigation" id="successBtn">Success Stories</a> 
     <a class="button navigation" id="workBtn">Community Work</a> 
     <a class="button navigation" id="charityBtn">Charity</a> 
     <a class="button navigation" id="contactBtn">Contact Me</a> 
    </div> 
    <div id="home"> 
     <div id="sliderFrame"> 
      <div id="slider"> 
       <img src="_images/_image01.jpg" /> 
       <img src="_images/_image02.jpg" /> 
       <img src="_images/_image03.jpg" /> 
       <img src="_images/_image04.jpg" /> 
       <img src="_images/_image05.jpg" /> 
      </div> 
     </div> 
     <div id="border"> 
      <img src="_images/_border.png" /> 
     </div> 
    </div> 
    <div id="aboutme"> 
     <div id="text"> 
      <p>This is the text</p> 
     </div> 
    </div> 
</body>

在我的例子，我想，當用戶點擊「關於我」按鈕，在div「家」淡出和DIV「aboutme」中消失。

我已經試過幾乎所有的計算器上的例子還有什麼了jQuery/JavaScript的網站，谷歌可能會在我，沒有運氣扔。

來源

2013-04-26 Mashy

我認爲這個問題是關於「使用jQuery或普通JavaScript」的性能。 – 2013-04-27 09:32:05

一種方法可以做到這一點，像這樣：

$('#aboutBtn').click(function(){ 
    $('#home').fadeOut(300); 
    $('#aboutme').delay(400).fadeIn(300); 
});

編輯：以上解決方案更多的是快速修復個別情況下，下面的解決方案是什麼樣的事情你應該這樣做，特別是當你有多個錨/ div。

Here's a working jsFiddle example。

HTML：

<a class="buttonNav" target="1">Home</a> 
<a class="buttonNav" target="2">About</a> 
<a class="buttonNav" target="3">Success</a> 


<div id="div1" class="targetDiv">Home Div</div> 
<div id="div2" class="targetDiv">About Div</div> 
<div id="div3" class="targetDiv">Success Div</div>

CSS：

.targetDiv { 
    display:none; 
    color:red; 
} 

.targetDiv:nth-of-type(1) { 
    display:block; 
}

的jQuery：

$(function(){ 
    $('.buttonNav').click(function(){ 
     $('.targetDiv').fadeOut(); 
     $('#div'+ $(this).prop('target')).delay(400).fadeIn(); 
    }); 
});

這種做法將大大cleane r用於擴展選項的使用，就像你的情況一樣。

來源

2013-04-26 19:46:11 lifetimes

爲什麼在使用'fadeOut'回調函數時使用延遲？ – Ian 2013-04-26 19:47:03

這將是有益的應用類，所以你可以具體淡入淡出。就像在點擊時添加一個活動類，這樣你就可以淡化當前的活動類，而不是爲每個實例製作一個特定的處理程序 - 這個評論是針對OP的。我知道Zenith知道這個 – 2013-04-26 19:47:20

+1，LOL，我剛剛學習了三個新的jQuery函數:)我正要提示'timeOut（）'，'opacity'和'filter：alpha（opacity）'。嗯，不，VoidKing，不！我很高興看到jQuery引入了這樣一種簡單的方法來實現可能是一種常見的web設計器請求。 – VoidKing 2013-04-26 19:49:18

可以fadeout的家格在這fadeout的回調可以fadein的關於我格。財產以後這樣的：

$('#aboutBtn').click(function(){ 
    $('#home').fadeOut('slow', function(){ 
    $('#aboutme').fadeIn('slow'); 
    }); 
});

這裏是FIDDLE

來源

2013-04-26 19:50:38 Raman

我喜歡Zenith的更好，顯示你如何設置毫秒 – VoidKing 2013-04-26 19:52:51

@VoidKing ..是的，我們也可以用毫秒代替'慢'。 – Raman 2013-04-26 19:54:41

嗨拉曼，首先，非常感謝您對這麼快的配偶評論，非常感謝！我也試過你的方法，但它不工作......當我點擊按鈕（即aboutBtn）時，它沒有做任何事情。不知道該怎麼辦:( – Mashy 2013-04-26 20:00:03

這裏有一個改進的例子：jsfiddle

這個例子可以讓你使用同一div爲所有鏈接的容器...

請注意，您應該添加一個HREF爲您的鏈接標籤。

玩得開心。

的jQuery：

$('#aboutme').hide(); 

$('#aboutBtn').click(function(){ 
$('#home').fadeOut('slow', function(){ 
    $('#aboutme').text('about me text!!!').fadeIn('slow', function(){ }); 
}); 
}); 
$('#homeBtn').click(function(){ 
$('#home').fadeOut('slow', function(){ 
    $('#aboutme').text('home text button text!!!').fadeIn('slow', function(){ }); 
}); 
}); 
//add other click events for each link.

編輯：調補 - 和節省時間

看到這個jsfiddle

現在你應該只設置一個數組鍵作爲相關鏈接相同的id並輸入他的文字！

玩得開心

來源

2013-04-26 20:10:13

嗨Shlomi，只是想說非常感謝你，因爲這工作！我決定採用你的方法，因爲它允許我使用相同的div作爲所有鏈接的容器（如你所提到的）。 – Mashy 2013-04-27 18:00:32

好的開心 - 你仍然可以接受答案請參閱我的編輯中的調整 – 2013-04-27 18:27:30

無論是使用jQuery的或純JavaScript以淡入淡出和

回答

相關問題