我创建了闪烁效果和不透明度的按钮。当我单击按钮时，不透明度正在工作，但闪烁效果不起作用

Question

我已经用jQuery写了代码，用于不透明和闪烁效果。Opacity工作正常，但jQuery不工作。

var blinkInterval;
        var pauseInterval;
        var blinking = true;
        $(document).ready(function(){
            $("#flash-toggle").click(function(){
                $('img').css("opacity", "20");
                blinkInterval = setInterval(blink, 500);
                pauseInterval = setInterval(toggleBlink, 2000);
            });

        }) ;     
        function toggleBlink() {
    if (blinking) {
        clearInterval(blinkInterval);
        blinking = false;
    } else {
        blinkInterval = setInterval(blink, 500);
        blinking = true;
    }
} 

我已经添加了一个图像使用img标签和创建的闪烁和不透明效果的按钮

<img class="bar1" src="flash-red.png" alt="bar" >
  <button id="flash-toggle"   onclick="toggleBlink() ">Enable Blinking</button>

Answer 1

纯CSS解决方案将是：

​

@keyframes blinkingFrames {
    0% {opacity: 1.00;}
    50% {opacity: 0.00;}
    100% {opacity: 1.00;}
}

.blinking {
    animation-name: blinkingFrames;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

button {
    vertical-align: top;
}

<script src="https://code.jquery.com/jquery-3.4.0.js"></script>
<img class="bar1" src="https://loremflickr.com/300/200" alt="bar" >
<button id="flash-toggle" onclick="$('.bar1').toggleClass('blinking')">
    Toggle Blinking
</button>

​

这使得一个无限的动画从100%不透明度到0%，然后回到100%，只要元素有类闪烁。动画需要4秒才能完成。