Question

我正在尝试按下某个按钮时显示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>

Answer 1

试试这个。

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

完整演示

＆＃13;

var main = function() {

  $("#myMenu").css("height", window.innerHeight);
  $("#myMenu").css("width", window.innerWidth);

}


$(document).ready(main);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

fadeIn()，fadeOut()和fadeToggle()会对您有所帮助：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

hide

仅此一项将使用默认动画隐藏和显示您的元素。您可以在http://api.jquery.com/toggle/

进一步自定义

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

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

3 个答案: