我的代码是这样的,其中包含 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 个图标之间交换的正确方法是吗?
最佳答案
您不能通过更改此类来淡入、淡出图标。
为了创建淡入和淡出效果,您需要使用不透明度。
请尝试下面的示例
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
关于javascript - 交换字体中的淡入/淡出很棒的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48462288/