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带有fadeIn效果。那么有了这段代码，我应该怎么做？

Answer 1

您可以使用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 2

在发生点击事件时，您可以在菜单元素上切换一个类，从而触发T过渡

CSS

CSS

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

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函数结合使用

3 个答案: