jquery - 将随机选择的先前图像转为灰度

Question

我有 16 张灰度图像，我需要它们随机选择并将它们制作成彩色图像。就像下面的代码我正在这样做。

setInterval(function(){

    var i = Math.floor(Math.random() * 16) + 1;
    $(".pnfitem-" + i).css('filter', "grayscale(0%)");
    $(".pnfitem-" + i).css('-webkit-filter', "grayscale(0%)");

},3000);

这也很好用，但是现在我需要在下一张图像变成彩色图像时给上一张图像添加灰度。虽然这些是随机选择的，但我怎样才能选择上一张图像并将其变回灰色-缩放图像

Answer 1

setInterval(function(){

    var i = Math.floor(Math.random() * 16);
    $(".pnfitem").removeClass("noGray").eq(i).addClass("noGray");
    
}, 1000);

.pnfitem{
  filter: grayscale(100%);
  transition: 0.8s;
}
.noGray{
  filter: grayscale(0%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">
<img class="pnfitem" src="//placehold.it/40x40/0bf">