Question

我正在尝试使用一些jQuery效果打开一个链接菜单。不幸的是，当我第一次点击时，菜单打开但没有任何效果。但是，在第二次单击后，效果开始工作。为什么以及如何解决这个问题？

CSS文件

.MenuWrapper {
z-index: 100;
display: inline-table;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
visibility: hidden;
}

脚本文件

$('.openMenu').click(function () {
    $(".MenuWrapper").css("visibility", "visible").fadeIn(500);
    $(".MenuText").fadeIn(500);
});

Answer 1

我认为问题是不透明度，因为fadeIn工作尝试将初始不透明度设置为0

＆＃13;

$('.openMenu').click(function() {
  $(".MenuWrapper").css("visibility", "visible").fadeTo(500, 1);
  $(".MenuText").fadeIn(500);
});

$('.MenuWrapper a').click(function(e) {
  e.preventDefault();
  $(".MenuWrapper").fadeTo(500, 0, function() {
    $(this).css("visibility", "hidden")
  });
});

＆＃13;

.MenuWrapper {
  z-index: 100;
  display: inline-table;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  visibility: hidden;
  opacity: 0
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="openMenu">Open</button>
<div class="MenuWrapper">
  This is the menu content
  <a class="close" href="">Close</a>
</div>

＆＃13;

Answer 2

$('.openMenu').click(function () {
    $(".MenuWrapper").fadeIn(500);
    $(".MenuText").fadeIn(500);
});

.MenuWrapper {
z-index: 100;
display: inline-table;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="openMenu">Open</button>
<div class="MenuWrapper">
  This is the menu content
  <a class="close" href="">Close</a>
</div>

尝试使用显示而不是可见性属性

jQuery效果在单击第一个按钮时不起作用，但从第二次单击开始就可以

2 个答案: