[英]Make a font awesome stop blinking or hidden
如果有人可以幫助我,我會很高興,我創建了兩個按鈕來控制這個font-awesome
圖標。 這些按鈕應:
非常感謝。
<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; } }
我不確定,但這是您需要根據您的要求執行的操作。
$("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
希望這是您正在尋找的要求,以此為參考
的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>
這是您需要的代碼更改。
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加載后包含此腳本。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.