制作切换按钮以更改面板

Question

我的应用程序顶部有两个面板，按钮上有一个按钮。默认情况下只有面板一必须可见，但是通过单击按钮面板一会淡出，面板二会淡入。我创建了布局，但我不知道如何实现它。

$(".panel2").hide();
$(document).ready(function() {
    $(".grid-button").on("click", function() {
        $(".grid").toggleClass("open close");
    });
});

div.app {
    margin:50px auto;
    width: 400px;
    height: 400px;
    border-radius:10px;
    overflow: hidden;
    position: relative;
}
div.app > .blur {
    width: 100%;
    height: 100%;
    background: url(http://goo.gl/0VTd9W);
    -webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
  position: absolute;
  left: 0px;
  text-align:center;
  color:#fff;
  font-size:20px;
}
div.mainSection{
  width:100%;
  height:85%;
  background:rgba(0,0,0,0.5);
  top:0;
}
div.dashboard{
  width:100%;
  height:15%;
  background:rgba(255,0,0,0.5);
  bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
    width: 100%;
    Height: 100%;
    Background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0px;
    top: 0px;
}

.grid-button {
  background: none;
  border: none;
  padding: 3px;
  width: 100%;
}

.grid {
  display: inline-block;
  height: 4px;
  position: relative;
  width: 32px;
  transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
  content: '';
  position: absolute;
  background-color: #FFF;
  display: inline-block;
  height: 4px;
  left: 0;
  width: 32px;
  transition: all 0.3s ease-in-out;
}

.grid.open {
  background-color: #FFF;
}
.grid.open:after {
  top: 10px;
}
.grid.open:before {
  top: -10px;
}

.grid.close {
  background-color: transparent;
  transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
  top: 0;
  transform-origin: 50% 50%;
}
.grid.close:before {
  transform: rotate(135deg);
}
.grid.close:after {
  transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
  <div class="blur"></div>
  <div class="mainSection">
    <div class="panel1">Panel1</div>
    <div class="panel2">Panel2</div>
  </div>
  <div class="dashboard">
    <div class="grid-button">
      <span class="grid open"></span>
    </div>
  </div>
</div>

首先，因为我做了 $('.panel2').hide();，在页面加载中，它首先加载面板然后隐藏它。我怎样才能让它从一开始就不可见？

其次，如何让panel2只有按下按钮才可见？

最后有没有为改变面板添加一些过渡效果？

Answer 1

首先要隐藏其中一个面板，我会使用名为 hidden:

的 css class

.hidden{
  display : none;
}

这听起来很像，只是隐藏了元素。然后，我会在 HTML decleration 中设置这个 class：

<div class="panel2 hidden">Panel2</div>

这将在页面加载时隐藏 panel2，这样您就不必使用 js 代码隐藏它。

然后，我会使用一个名为 panel 的助手 css class 作为面板标识符（您可以使用 data 属性，或者识别这些元素的任何其他方式）。对于 5 个面板，它看起来像这样：

<div class="panel panel1">Panel1</div>
<div class="panel panel2 hidden">Panel2</div>
<div class="panel panel3 hidden">Panel3</div>
<div class="panel panel4 hidden">Panel4</div>
<div class="panel panel5 hidden">Pane5</div>

最后，为了使它适用于您想要的任意数量的面板（不一定是 2 个），我会使用 "carousel" 效果来切换面板的可见性，同时有一种方法可以跟踪它们（添加和删除 hidden class），并使用 fadeIn/fadeOut 效果。（同样，您始终可以使用 data 属性而不是使用 panel1,panel2,panel3... classes 来标识面板（请在 jQuery 文档中阅读更多相关信息），或者在任何其他方式）。

var currentPanel = 1;
$(".grid-button").on("click", function() {

    $(".grid").toggleClass("open close");        
    $(".panel"+currentPanel).fadeOut("normal", function(){
        $(this).addClass('hidden');
    });

    currentPanel = currentPanel >= $(".panel").length ?  1 :  currentPanel+1;
    $(".panel"+currentPanel).fadeIn().removeClass('hidden');
});

请注意 hidden class 实际上 "looses" 它是在第一次点击后起作用的，因为 jQuery 改变了 display 属性内联，但我认为保留它们可能无害（跟踪它们会更容易）。

你可以在这里看到一个例子：https://jsfiddle.net/j79y5kdb/3/

Answer 2

你可以试试：

$(".grid-button").on("click", function() {
   var visibleObj = $('.mainSection div:visible');
   var inVisibleObj = $('.mainSection div:hidden');
   visibleObj.fadeOut(500, function() {
       inVisibleObj.fadeIn(500);
   });
});

虽然您需要的可见性：

<div class="panel2" style="display: none;">Panel2</div>

运行片段：

$(function () {
  $(".grid-button").on("click", function() {
    var visibleObj = $('.mainSection div:visible');
    var inVisibleObj = $('.mainSection div:hidden');
    visibleObj.fadeOut(500, function() {
      inVisibleObj.fadeIn(500);
    });
  });
});

div.app {
  margin:50px auto;
  width: 400px;
  height: 400px;
  border-radius:10px;
  overflow: hidden;
  position: relative;
}
div.app > .blur {
  width: 100%;
  height: 100%;
  background: url(http://goo.gl/0VTd9W);
  -webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
  position: absolute;
  left: 0px;
  text-align:center;
  color:#fff;
  font-size:20px;
}
div.mainSection{
  width:100%;
  height:85%;
  background:rgba(0,0,0,0.5);
  top:0;
}
div.dashboard{
  width:100%;
  height:15%;
  background:rgba(255,0,0,0.5);
  bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
  width: 100%;
  Height: 100%;
  Background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0px;
  top: 0px;
}

.grid-button {
  background: none;
  border: none;
  padding: 3px;
  width: 100%;
}

.grid {
  display: inline-block;
  height: 4px;
  position: relative;
  width: 32px;
  transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
  content: '';
  position: absolute;
  background-color: #FFF;
  display: inline-block;
  height: 4px;
  left: 0;
  width: 32px;
  transition: all 0.3s ease-in-out;
}

.grid.open {
  background-color: #FFF;
}
.grid.open:after {
  top: 10px;
}
.grid.open:before {
  top: -10px;
}

.grid.close {
  background-color: transparent;
  transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
  top: 0;
  transform-origin: 50% 50%;
}
.grid.close:before {
  transform: rotate(135deg);
}
.grid.close:after {
  transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="app">
    <div class="blur"></div>
    <div class="mainSection">
        <div class="panel1">Panel1</div>
        <div class="panel2" style="display: none;">Panel2</div>
    </div>
    <div class="dashboard">
        <div class="grid-button">
            <span class="grid open"></span>
        </div>
    </div>
</div>

制作切换按钮以更改面板

making a toggle button to change panels

html

javascript

css

jquery

toggle