Question

我有一个菜单切换，点击后，将Font Awesome图标类从汉堡包更改为十字架。我想要一些动画，toggleClass会做一个简单的淡入淡出。因为它改变了类，所以淡入淡出效果不像我在下面添加的那样添加类。

$( ".menu-toggle" ).click(function() {
    $(this).find('i').toggleClass('fa-bars fa-times', 1000);
});

如何在下面的代码中添加简单的淡入淡出？

$( ".menu-toggle" ).click(function() {
    $(this).find('i').toggleClass('fa-bars fa-times');
});

Answer 1

试试这个？它没有使用字体很棒，但使用CSS可以获得相同的效果。

HTML：

<div class="hamburger">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>

CSS

.hamburger {
  width: 30px;
  height: 20px;
  position: relative;
  margin: auto;
}
.hamburger .line {
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  transition: all 200ms;
}
.hamburger .line:nth-child(1) {
  top: 0;
}
.hamburger .line:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger .line:nth-child(3) {
  bottom: 0;
}
.hamburger.close .line:nth-child(1), .hamburger.close .line:nth-child(2)          {
  top: 0;
  transform: translateY(9px) rotate(45deg);
}
.hamburger.close .line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

body {
  margin: 20px;
}

JS

$('.hamburger').click(function(e) {
  $(this).toggleClass('close');
});

http://codepen.io/peiche/pen/bfchi

使用Font Awesome切换淡化toggleClass

1 个答案: