如何使用Javacript製作簡單的fadeToggle導航/網站？

我正在嘗試學習一些基本的Javascript。我有三個簡單的按鈕。我想單擊事件按鈕，隱藏聯繫人和媒體容器並顯示事件容器。這裏就是我的工作......如何使用Javacript製作簡單的fadeToggle導航/網站？

$(".events, .events-close").click(function(){ 
    $(".contact-container, .media-container").fadeOut(500, function(){ 
     $(".events-container").fadeToggle(); 
    }); 
});

來源

2017-04-18 greggh

請發表您的相關HTML – mhodges

請仔細閱讀[問]。重要短語：「搜索和研究」和「解釋......阻止你自己解決它的任何困難」。具體來說，你不想發生什麼事情，你不想發生什麼，等等。 –

看起來像它工作正常，假設你的HTML是正常的... https://jsfiddle.net/tr_santi/u6yfooxz/2/ – Santi

讓我們看看你有三個按鈕好嗎...你想要處理每個按鈕的click events權利？然後...在您想要顯示/隱藏某些<div>的點擊事件上？

這是一個簡單的例子...

$(function(){ 
 

 
// Let's handle the buttons events 
 
$('#btnContact').on('click', function(){ 
 
\t $("#divContact").fadeIn('slow'); 
 
\t $("#divMedia").hide(); 
 
\t $("#divEvents").hide(); 
 

 
}); 
 
$('#btnMedia').on('click', function(){ 
 
\t $("#divContact").hide(); 
 
\t $("#divMedia").fadeIn('slow'); 
 
\t $("#divEvents").hide(); 
 

 
}); 
 
$('#btnEvent').on('click', function(){ 
 
\t $("#divContact").hide(); 
 
\t $("#divMedia").hide(); 
 
\t $("#divEvents").fadeIn('slow'); 
 

 
}); 
 
});

.hideDiv{ 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Example</title> 
 
\t <!-- Latest compiled and minified CSS & JS --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
\t <!-- JQuery 1.12.4 Google Hosted Library --> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t <!-- The buttons --> 
 
\t \t \t <button id="btnContact" class="events btn btn-success">Contact</button> 
 
\t \t \t <button id="btnMedia" class="events btn btn-warning">Media</button> 
 
\t \t \t <button id="btnEvent" class="events btn btn-danger">Events</button> 
 
\t \t </div> 
 
\t \t <!-- your divs... --> 
 
\t \t <div class="row hideDiv" id="divContact"> 
 
\t \t \t <h3>Contact</h3> 
 
\t \t \t <p>Your HTML content here...</p> 
 
\t \t </div> 
 
\t \t <div class="row hideDiv" id="divMedia"> 
 
\t \t \t <h3>Media</h3> 
 
\t \t \t <p>Your HTML content here...</p> 
 
\t \t </div> 
 
\t \t <div class="row hideDiv" id="divEvents"> 
 
\t \t \t <h3>Events</h3> 
 
\t \t \t <p>Your HTML content here...</p> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

來源

2017-04-18 20:52:19

這是一個很好的例子！謝謝費爾南多。然而，我想要在容器上獲得一些FadeIn和FadeOut效果。但我是assumin如果我將Fades應用於您的示例，它將無法工作？我需要淡入淡出之前正在顯示的容器？ – greggh

當然！我編輯了代碼，檢查出來了，現在有「淡入」效果:) –

這是完美的費爾南多！你砸了它！非常感謝你，我是一個喜歡Javascript的小菜鳥，你一直都很清楚，簡潔。 – greggh

假設你只需要使用切換所有XXX的容器。既然你想切換所有這些與具有類.events和.events關閉這裏的按鈕是JS：

$(".events, .events-close").click(function(){ 
    $(".contact-container").fadeToggle("slow", "linear"); 
    $(".media-container").fadeToggle("slow", "linear"); 
    $(".events-container").fadeToggle("slow", "linear"); 
});

，並在CSS你根本：

.events-container { 
    display: none; //this makes the container "invisible" at page load time 
} 
.media-container { 
    opacity: 100; //this makes the container "visible" at page load time 
} 
.contact-container { 
    opacity: 100; //this makes the container "visible" at page load time 
}

自fadeToggle方法通過增加或減少元素的實際值來操縱元素的不透明屬性。

看看.fadeToggle（）的文檔：here

它說：

的.fadeToggle（）方法動畫匹配元素的不透明度。在可見元素上調用時，一旦不透明度達到0時，元素的顯示樣式屬性將設置爲無，因此該元素不再影響頁面的佈局。

希望我能幫助你！

來源

2017-04-18 20:45:19 chwzr

感謝您的回答。當然，這將打開和關閉所有的容器在同一時間。 – greggh

是的，它執行以下操作：「隱藏聯繫人和媒體容器並顯示事件容器。」在你的問題...只是嘗試它在小提琴：[鏈接]（https://jsfiddle.net/u6yfooxz/4/） – chwzr

對不起，沒有工作，我想如何。我的問題不清楚，下一次我會努力做得更清楚。測試鏈接在這裏：http://gregghooker.co.uk/tlgt/ 費爾南多釘了我想要的功能，但沒有淡化效果。 – greggh

如何使用Javacript製作簡單的fadeToggle導航/網站？

回答

相關問題