使字体很棒，停止闪烁或隐藏

Question

如果有人可以帮助我，我会很高兴，我创建了两个按钮来控制这个font-awesome图标。 这些按钮应：

1. 关闭或打开闪烁。
2. 隐藏或显示图标。

非常感谢。

<i class="fa fa-chevron-right text-success Blink"></i>

的CSS

.Blink { animation: blinker 0.1s cubic-bezier(.5, 0, 1, 1) infinite alternate; }
@keyframes blinker { from { opacity: 1; } to { opacity: 0; } }

Answer 1

我不确定，但这是您需要根据您的要求执行的操作。

 $("button").click(function(){ $(".Blink").toggle(); }); 

 .Blink { animation: blinker 0.1s cubic-bezier(.5, 0, 1, 1) infinite alternate; } @keyframes blinker { from { opacity: 1; } to { opacity: 0; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <i class="fa fa-chevron-right text-success Blink">s</i> <button type="button"> Toggle</button> 

在所有元素的隐藏和显示之间切换。

有关更多信息： -jquery toogle

Answer 2

希望这是您正在寻找的要求，以此为参考

的HTML

<button id="onOROff">
OFF
</button>
<button id="showORhide" value="Hide">
Hide
</button>
<i class="fa fa-chevron-right text-success Blink"></i>

的CSS

.Blink { animation: blinker 0.1s cubic-bezier(.5, 0, 1, 1) infinite alternate; }
@keyframes blinker { from { opacity: 1; } to { opacity: 0; } }

脚本

$("#onOROff").on('click',function(){
$("#onOROff").text(this.innerText=='OFF'?'ON':'OFF');
if(this.innerText=='ON')
$('.fa-chevron-right').removeClass('Blink');
else
$('.fa-chevron-right').addClass('Blink');
});
$("#showORhide").click(function(){
$("#showORhide").text(this.innerText=='Hide'?'Show':'Hide');
    $(".Blink").toggle();
});

工作小提琴

注意：这是依赖于jQuery的解决方案，请确保我们在js引用中仅使用过一次

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Answer 3

这是您需要的代码更改。

HTML：

只需给i标签一个id如下，并引入两个新按钮即可切换眨眼和显示

<i id="blink" class="fa fa-chevron-right text-success Blink"></i>
<button onclick="toggleBlink()">Toggle blink</button>
<button onclick="toggleDisplay()">Toggle display</button>

CSS：

包括以下课程

.hide {
  display: none;
}

只需确保在包含字体超赞的CSS之后就加入该CSS，因为字体超赞类具有display：inline-block属性

JS：

包括下面的按钮单击处理程序

var blinkIcon = document.getElementById("blink");

function toggleBlink() {
    blinkIcon.classList.toggle("Blink");
}

function toggleDisplay() {
    blinkIcon.classList.toggle("hide");
}

确保在DOM加载后包含此脚本。