CODEWITHSUNDEEP
javascriptjquerycssfadeinopacity
Antonin GAVREL
Antonin GAVREL

Reputation: 11249

Change opacity of random image (toggle)

I have looked for an answer for about 2 hours without any success: How do you make an animation that change the opacity of images in a grid randomly with a slow fadein ?

Upvotes: 0

Views: 653

Answers (3)

sbonkosky
sbonkosky

Reputation: 2557

The code from the webpage you linked is doing the following (I modified it a little bit for simplicity's sake):

$(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);
}

Upvotes: 1

Diego Bauleo
Diego Bauleo

Reputation: 681

It's not the most elegant code since I did it in like 5 minutes, but you may be able to get the idea and improve it:

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>

Here is a demo: https://jsfiddle.net/ymu3ghgk/

Upvotes: 1

Brian
Brian

Reputation: 2829

Just break down the component and you should be able to figure out the logic:

  • 9 avatars in a 3x3 grid.
  • Approx. every 3 seconds, there's a new "active" one
  • Everything that is not active is faded out

So, we can search how to make a 3x3 grid in css, figure out how to rig a 3 second timer with Javascript to change an element's class, and with a class toggle the fade between an active and non-active element.

If you can put all that together, you got your component!

Upvotes: 0

Related Questions