如何使用Javascript創建簡單的fadeToggle導航/站點？

Question

我正在嘗試學習一些基本的Javascript。 我有三個簡單的按鈕。 我想單擊事件按鈕，隱藏聯系人和媒體容器並顯示事件容器。 這就是我正在做的...

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

Answer 1

假設您只需要對所有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（）的文檔：此處

它說：

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

希望我能為您服務！

Answer 2

讓我們看看您有三個按鈕可以...，您想正確處理每個按鈕的click events嗎？ 然后...在您要顯示/隱藏一些<div>的單擊事件上？

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

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

 .hideDiv{ display: none; }

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

如何使用Javascript創建簡單的fadeToggle導航/站點？

問題描述

2 個解決方案

解決方案1
0 2017-04-18 20:45:19

解決方案2
0 已采納 2017-04-18 20:52:19

如何使用Javascript創建簡單的fadeToggle導航/站點？

問題描述

2 個解決方案

解決方案1 0 2017-04-18 20:45:19

解決方案2 0 已采納 2017-04-18 20:52:19

解決方案1
0 2017-04-18 20:45:19

解決方案2
0 已采納 2017-04-18 20:52:19