切换时如何在javascript和css中转换为“隐藏”

Posted 2023-03-06

【中文标题】切换时如何在javascript和css中转换为“隐藏”

【英文标题】：How to transition to "hidden" in javascript and css when toggling

【发布时间】：2017-01-10 17:35:09

【问题描述】：

我试图在按下某个按钮时显示一个 div，并让它在 .hidden 类（隐藏 div）之间切换。我试图通过添加过渡来制作动画，但由于某种原因，它被隐藏的事实以某种方式破坏了这一点。简而言之，我想知道是否有一种方法可以为隐藏状态和可见状态之间的过渡设置动画。

var main = function() 

  $("#myMenu").css("height", window.innerHeight);
  $("#myMenu").css("width", window.innerWidth);




$(document).ready(main);

.toggle 
  font-size: 20px;
  margin: 20px;
  margin-top: 30px;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;

.hidden 
  visibility: none;
  display: none;

.menu 
  background-color: red;
  position: fixed;
  top: 0;

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

<!--contains hamburger-->
<div class="toggle">
  <a id="tButton" href="javascript:void(0);" onclick="toggleNav()">&#9776;</a>
</div>

<!--actual mobile menu-->
<div id="myMenu" class="menu hidden">
  <ul>
    <li><a onclick="toggleNav()">Home</a>
    </li>
    <li><a onclick="toggleNav()">Events</a>
    </li>
    <li><a onclick="toggleNav()">About</a>
    </li>
    <li><a onclick="toggleNav()">Volunteer</a>
    </li>
    <li><a onclick="toggleNav()">Contact</a>
    </li>

  </ul>

</div>

<script>
  function toggleNav() 
    $("#myMenu").toggleClass("hidden");
    if ($("#myMenu").hasClass("hidden")) 
      $("#tButton").text(String.fromCharCode(9776));

     else 
      $("#tButton").text(String.fromCharCode(10005));
    
  
</script>

【问题讨论】：

fadeToggle --- slideToggle ...

这行得通，但是如果我希望菜单以隐藏的形式开始呢？

在 CSS 上将其作为 'display:none' 启动

【参考方案1】：

由于您已经在使用 jQuery，您可以让库为您完成繁重的工作。

fadeIn()、fadeOut() 和 fadeToggle() 将为您提供帮助：

$('#my-div').hide();

function show() 
  $('#my-div').fadeToggle();

#my-div 
  width: 100px;
  height: 100px;
  background: blue;

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

<button onclick='show()'>Toggle</button>
<div id='my-div'></div>

【参考方案2】：

您正在使用 jQuery，但出于某种原因，您尝试手动执行此操作。 您有多个 jQuery 函数可以为您执行此操作。

$("#myMenu").toggle();

仅此一项就会使用默认动画隐藏和显示您的元素。 您可以通过http://api.jquery.com/toggle/进一步自定义它

您还可以使用其他方法，例如 fadeToggle（或单独使用 fadeIn 和 fadeOut）和 slideToggle 方法。 包括 hide 和 show 方法......隐藏或显示您的元素......（因此不需要 .hidden css 类）

【参考方案3】：

试试这个。

if ($("#myMenu").hasClass("hidden")) 
      $("#tButton").text(String.fromCharCode(9776));

       $("#myMenu").fadeIn()
        $("#myMenu").removeClass('hidden');
     else 
      $("#myMenu").addClass('hidden');
         $("#myMenu").fadeOut();
      $("#tButton").text(String.fromCharCode(10005));
    

完整演示

var main = function() 

  $("#myMenu").css("height", window.innerHeight);
  $("#myMenu").css("width", window.innerWidth);




$(document).ready(main);

.toggle 
  font-size: 20px;
  margin: 20px;
  margin-top: 30px;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;

.hidden 
  visibility: none;
  display: none;

.menu 
  background-color: red;
  position: fixed;
  top: 0;

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

<!--contains hamburger-->
<div class="toggle">
  <a id="tButton" href="javascript:void(0);" onclick="toggleNav()">&#9776;</a>
</div>

<!--actual mobile menu-->
<div id="myMenu" class="menu hidden">
  <ul>
    <li><a onclick="toggleNav()">Home</a>
    </li>
    <li><a onclick="toggleNav()">Events</a>
    </li>
    <li><a onclick="toggleNav()">About</a>
    </li>
    <li><a onclick="toggleNav()">Volunteer</a>
    </li>
    <li><a onclick="toggleNav()">Contact</a>
    </li>

  </ul>

</div>

<script>
  function toggleNav() 
  
    if ($("#myMenu").hasClass("hidden")) 
      $("#tButton").text(String.fromCharCode(9776));
     
       $("#myMenu").fadeIn();
        $("#myMenu").removeClass('hidden');
     else 
      $("#myMenu").addClass('hidden');
         $("#myMenu").fadeOut();
      $("#tButton").text(String.fromCharCode(10005));
    
  
</script>