如何使用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