Changing transparency of items inside array

Question

What I want to do is change the transparancy of the jpg's. I have put my ul li img inside an array.

When I click an image I can see in my console, the position of the clicked image, inside the array.

Now when I click an Image I'd like to change the transparency of that image and also the transparency of the images who precede the clicked image.

So for example: when I click the image who is positioned at 4 inside the array. I want the transparency set to 1 for items 0,1,2,3 and 4 inside the array. How can I access the css of the clicked item of an array?

HTML

<ul id="people">
    <li><img src="person.jpg" alt="person" id="img1"></li>
    <li><img src="person.jpg" alt="person" id="img2"></li>
    <li><img src="person.jpg" alt="person" id="img3"></li>
    <li><img src="person.jpg" alt="person" id="img4"></li>
    <li><img src="person.jpg" alt="person" id="img5"></li>
    <li><img src="person.jpg" alt="person" id="img6"></li>
    <li><img src="person.jpg" alt="person" id="img7"></li>
    <li><img src="person.jpg" alt="person" id="img8"></li>
    <li><img src="person.jpg" alt="person" id="img9"></li>
    <li><img src="person.jpg" alt="person" id="img10"></li>
</ul>

CSS

ul li {
    display: inline-block;
    text-decoration: none;
    list-style-type: none;
}

img{
    width: 90px;
    opacity: 1;
}

JS

$( document ).ready(function() {
    $('ul').transition({ opacity: 0.1, delay: 500 });

    jQuery(function(){
        var peopleArray = [];

        $('#people li img').each(function(){
            peopleArray.push(this);
        })
        console.log(peopleArray);

        $('ul li img').click(function() {
            console.log(($('ul li img').index(this)));
        });
    });

LIBRARY

I'm using jquery-transit:

http://ricostacruz.com/jquery.transit/

Answer 1

Try this

$('#people li img').on("click",function() { 
  // you likely also want to reset
  $(this).closest("ul")
    .find("img").transition({ opacity: 0.1, delay: 500 });
  $(this).closest("li").prevUntil().andSelf()
    .find("img").transition({ opacity: 1, delay: 500 }); 
});

You may want to put one inside the callback to not have a blinking update