结合 fadeIn 效果与 .css() jQuery 函数

Question

我正在处理我网站的菜单，您可以通过单击汉堡菜单按钮 (.menu-button) 打开该菜单。单击时，它会通过运行以下脚本打开 div #menu（此 div 覆盖整个视口）：

<script>
    $('.menu-button').on('click', function() {
        if ($('#menu').css('display') == 'none') {
            $('#menu').css('display', 'block');
        } else {
            $('#menu').css('display', 'none');
        }
    });
</script>

现在，我想让 #menu div 以淡入效果出现。那么有了这个代码，我应该怎么做呢？

Answer 1

在点击事件中，您可以在触发 CSS 转换的菜单元素上切换 class

<script>
    var menu = document.getElementById('menu');
    $('.menu-button').on('click', function() {
        menu.classList.toggle('visible');
    });
</script>

CSS

#menu {
   opacity: 0;
   transition: opacity 1s 0s;
}

#menu.visible {
   opacity: 1;
}

Answer 2

您可以通过使用 fadeToggle() 来实现您需要的并简化逻辑：

$('.menu-button').on('click', function() {
  $('#menu').fadeToggle();
});

.menu-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
}

#menu {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu-button">Toggle menu...</button>
<div id="menu"></div>

Answer 3

您可以使用 animate 和动画后 display:hide 的回调

    $('.menu-button').on('click', function() {
        if ($('#menu').css('display') == 'none') {
            $('#menu').css('display', 'block');
          $('#menu').animate({'opacity':'1'},400)
        } else {
            
          $('#menu').animate({'opacity':'0'},400,function(){
            $('#menu').css('display', 'none');
          })
        }
    });

div {
  width:100px;
  height:100px;
  border:1px solid #000;
}

#menu {
  opacity:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='menu-button'>
</div>
<div id='menu' style='display:none'>
  dzq
</div>

结合 fadeIn 效果与 .css() jQuery 函数

Combine fadeIn effect with .css() jQuery function

css

jquery

display