使用toggleClass（）函数时，如何淡化更改？

Question

以下是我的尝试。班级翻转，但不会褪色。

function showNav(){
            $("div.divNav").toggleClass("showNav");
            $("div.divNav").fadeToggle("slow");
        }

是否可以使用CSS转换？

Answer 1

首先尝试切换淡入淡出，然后关闭该类：

＆＃13;

＆＃13;

function showNav() {
  $("div.divNav").fadeToggle("slow");
  $("div.divNav").toggleClass("showNav");
}
setTimeout(function() {
  showNav();
}, 300);

＆＃13;

.divNav {
  width: 150px;
  height: 150px;
  background: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divNav">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

fadeToggle("slow");应该有效......但您可以尝试Css3-transitions

看看这个例子：

.divNav {
  background-color: black;
  height: 150px;
  width: 150px;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
}

.divNav:hover {
  opacity: 0;
}

<div class="divNav">
</div>