javascript - 交换字体中的淡入/淡出很棒的图标

Question

我的代码是这样的，其中包含 FontAwesome 4.7

JS代码:

$('#icon').click(function(){
      $(this).attr("class", "fa fa-iconA");

HTML 代码:

<i id="icon" class="fa fa-iconB" aria-hidden="true"></i>

我希望点击后 iconA - iconB 的交换是动画的，就像淡出/淡入一样。我能怎么做？单击后在 2 个图标之间交换的正确方法是吗？

Answer 1

您不能通过更改此类来淡入、淡出图标。

为了创建淡入和淡出效果，您需要使用不透明度。

请尝试下面的示例

jQuery('.icon').click(function(){
  jQuery('.icon').toggleClass('hidden');
})

.icon-wrap{
  position:relative;
  background:#333;
  height:25px
}

.icon-wrap .icon {
  color:#fff;
  position:absolute;
  left:0;
  top:0;
  transition:linear all 0.5s;
  cursor:pointer;
  
}

.icon-wrap .icon.hidden{
opacity:0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ICON Example

<div class="icon-wrap">
<i class="fa fa-twitter icon icon1"></i>
<i class="fa fa-facebook icon icon2 hidden"> </i>
</div>


Click on icon to see effect