更改随机图像的不透明度（切换）答案

【问题标题】：Change opacity of random image (toggle)更改随机图像的不透明度（切换）
【发布时间】：2015-05-13 16:35:55
【问题描述】：

我已经寻找了大约 2 个小时的答案，但没有任何成功：你如何制作一个动画，用缓慢的淡入淡出随机改变网格中图像的不透明度？

【问题讨论】：

我们很乐意为您提供帮助。你试过什么？
您是否尝试过类似的方法：应用于 CSS 类的不透明度过渡，从而可以由图像上的 javascript 函数随机触发？

标签： javascript jquery css fadein opacity

【解决方案1】：

只需分解组件，您应该就能弄清楚逻辑：

3x3 网格中的 9 个化身。
大约。每 3 秒，就有一个新的“活跃”的
所有不活跃的东西都会淡出

所以，我们可以搜索如何创建 3x3 grid in css，找出如何使用 Javascript 更改 rig a 3 second timer 以更改 element's class，以及在活动元素和非活动元素之间使用 toggle the fade 类。

如果你能把所有这些放在一起，你就得到了你的组件！

【讨论】：

【解决方案2】：

这不是最优雅的代码，因为我在大约 5 分钟内完成了它，但您可能能够理解并改进它：

jQuery

$(function(){
setInterval(function(){
    var i = Math.floor(Math.random() * 10) + 1;

    $("[data-highlight=1]").attr("data-highlight", "0").animate({
        opacity: 0.2
    }, 1000);

    $("#photo-" + i).attr("data-highlight", "1").animate({
        opacity: 1
    }, 1000);
}, 3000);
});

CSS

.photo {
    width: 150px;
    height: 150px;
    background-color: #F00;
    font-size: 2em;
    color: #FFF;
    float: left;
    opacity: 0.2;
}

HTML

<div class="photo" id="photo-1" data-highlight="0">DIV</div>
<div class="photo" id="photo-2" data-highlight="0">DIV</div>
<div class="photo" id="photo-3" data-highlight="0">DIV</div>
<div class="photo" id="photo-4" data-highlight="0">DIV</div>
<div class="photo" id="photo-5" data-highlight="0">DIV</div>
<div class="photo" id="photo-6" data-highlight="0">DIV</div>
<div class="photo" id="photo-7" data-highlight="0">DIV</div>
<div class="photo" id="photo-8" data-highlight="0">DIV</div>
<div class="photo" id="photo-9" data-highlight="0">DIV</div>
<div class="photo" id="photo-10" data-highlight="0">DIV</div>

这是一个演示：https://jsfiddle.net/ymu3ghgk/

【讨论】：

【解决方案3】：

您链接的网页中的代码正在执行以下操作（为简单起见，我对其进行了一些修改）：

$(function(){
    setInterval(setImageOpacity, 2000); // Every 2 seconds call function setImageOpacity()
});

function  setImageOpacity() {
    var images = $('#careerImageTable img'); // Gets all images from the grid
    var currentIndex = -1;
    $.each(images, function (index, item) { // Loops through each image
        if ($(item).css('opacity') == 1) { // Checks the opacity of the current image
            currentIndex = index; // If opacity == 1 then thats the current index
            return false;
        }
    });

    var nextIndex = currentIndex;
    while (nextIndex == currentIndex) {
        nextIndex = Math.floor(Math.random() * images.length); // Will loop until a different index is found
    }

    images.eq(currentIndex).fadeTo(1000, 0.3); // The opacity animations
    images.eq(nextIndex).fadeTo(1000, 1);
}

【讨论】：

解释得很好，但并不完全有效：确实图像褪色但有时一张图像不会褪色到 0.3