点击事件后,JavaScript可以在客户端页面中更改我的CSS类吗？

我得到了这段JavaScript,我希望通过更改类并让这个(新的)CSS3效果动画淡入淡出我的div.我之前使用过.click和.fadeToogle但是这远远落后了.如果您阅读有关setTimer事物和CSS3动画的所有讨论,CSS3动画应该在手机上要好得多. (我这是在phonegapp上作为混合应用程序这样做,所以是的,它真的很滞后！)

此代码用于在单击时显示我的div,但无法读取它分配的新类,并且不会再次关闭div.这是JavaScript / jQuery代码：

$(function() {
  $("#stylesButtonImg").click(function() {
    if ($('#styles').hasClass("closed")) {
      $('#styles').removeClass('closed');
      $('#styles').addClass('open');
    } else if ($('#styles').hasClass("open")) {
      $('#styles').removeClass('open');
      $('#styles').addClass('close');
    }
  });
});

#styles {
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
  left: 200px;
  height: 100px;
  width: 100px;
  background-color: rgba(000, 000, 000, 0.95);
  transition: 1s opacity;
}
.closed{display:none;}
.open{display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="stylesButtonImg">click me</button>
<div id="styles" class="closed">
    <?php include 'styles.php';?>
</div>

解决方法:

不要使用display：none,因为它不能动画.使用不透明度,这是可动画的.此外,toggleClass将在您打开/关闭之间翻转,而不是您必须自己检查和翻转.

$(function() {
  $("#stylesButtonImg").click(function() {
    $('#styles').toggleClass('open', 'closed');
  });
});

#styles {
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
  left: 200px;
  height: 100px;
  width: 100px;
  background-color: rgba(000, 000, 000, 0.95);
  transition: 1s opacity;
}
.closed {
  opacity: 0;
}
.open {
  opacity: 1;
}
#stylesButtonImg {
  position: relative;
  z-index: 2
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="stylesButtonImg">click me</button>
<div id="styles" class="closed">
  <?php include 'styles.php';?>
</div>

标签：fadein,javascript,jquery,css,css3
来源： https://codeday.me/bug/20190828/1755399.html