Question

我已经用jQuery编写了代码，以实现不透明和闪烁效果。不透明度起作用，但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秒钟才能完成。

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

1 个答案: