Изменение непрозрачности случайного изображения (toggle)

Question

Я искал ответ в течение примерно 2 часов без каких-либо успехов: Как сделать анимацию, которая изменяет непрозрачность изображений в сетке случайным образом с медленным fadein?

Answer 1

Просто ломаются компонент, и вы должны быть в состоянии выяснить логику:

• 9 аватаров в 3х3.
• Приблизительный. каждые 3 секунды, есть новый «активный» один
• Все, что не является активным утрачен из

Таким образом, мы можем найти, как сделать 3x3 grid in css, выяснить, как rig a 3 second timer с Javascript, чтобы изменить element's class , и с классом toggle the fade между активным и неактивным элементом.

Если вы можете положить все это вместе, вы получили свой компонент!

Answer 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/

Answer 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); 
}