时间戳

首页 > 解决方案 > 并排的图像一个一个地闪烁——就像一个序列

jquery - 并排的图像一个一个地闪烁——就像一个序列

问题描述

我有 2 个 div。每个 div 包含 4 个按钮。单击相应的 div 按钮时，2 个图像并排显示。我还有一个用于闪烁这些图像的按钮。单击按钮时，两者都在同时闪烁。我正试图将它们一一闪烁。我该怎么办？Ty

css

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


}

.blinking {
    animation-name: blinkingFrames;
    animation-duration: 0.5s;

    animation-iteration-count: infinite;
}

jquery------------------------

For div-1
 $('.green-button').on('click', function() {
    $('#bar').attr('src', 'flash-green.png');

  });

For div-2
 $('.green-button1').on('click', function() {
    $('#bar1').attr('src', 'flash-green.png');

身体 - - - - - - - - - - - - 

<img  id="ba" class="bar1" src="flash-red.png" alt="bar" >
 <img  id="ba1" class="bar1" src="flash-red.png" alt="bar" >


<button id="flash-toggle" onclick="$('.bar1').toggleClass('blinking')">
            Toggle Blinking
        </button>

标签： jquery

解决方案

推荐阅读