Question

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

＆＃13;

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

首先，我做了$('.panel2').hide();，首先在页面加载中加载面板然后隐藏它。如何从一开始就让它变得不可见？

其次，如何仅通过按下按钮使面板2可见？

最后还是要为更换面板添加一些过渡效果吗？

Answer 1

您可以尝试：

$(".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>

Answer 2

要首先隐藏其中一个面板，我会使用名为css的{{1}}类：

hidden

这只是听起来像是隐藏元素。比，我在.hidden{ display : none; } decleration中设置了这个类：

HTML

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

然后，我使用名为<div class="panel2 hidden">Panel2</div>的帮助css类作为面板标识符（您可以使用panel属性，也可以使用任何其他方式识别这些属性元件）。对于5个面板，它看起来像这样：

data

最后，为了使这个工作适用于你想要的任意数量的面板（不是必需的2），我会使用“旋转木马”效果切换面板的可见性，同时有办法跟踪它们（添加和删除<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>类），并使用fadeIn / fadeOut效果。（同样，不是使用hidden类来标识面板，而是始终使用panel1,panel2,panel3...属性（请在jQuery文档中详细了解它），或者以任何其他方式）。

data

请注意，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'); });类在第一次单击后实际上“丢失”了它的功能，因为jQuery内联更改了hidden属性，但我认为保持它们可能没有害处（跟踪它们会更容易。）

您可以在此处查看示例：https://jsfiddle.net/j79y5kdb/3/

制作切换按钮以更改面板

2 个答案: