Question

如果有人可以帮助我，我会很高兴，我创建了两个按钮来控制这个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; } }

Answer 1

我不确定，但根据您的要求，这是您需要做的事情。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

在hide和show之间切换所有元素。

有关详情： - 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();
});

Working Fiddle

注意：这是依赖于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;
}

请确保在包含字体awesome css之后输入此css，因为字体很棒的类已显示：inline-block property

JS：

包含以下按钮的点击处理程序

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

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

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

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

使字体真棒停止闪烁或隐藏

3 个答案: