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.

enter image description here

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

enter image description here

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/

You're complicating it -> **http://jsfiddle.net/9ok9kdqd/1/** — adeneo, Dec 27 '14 at 17:02
Don't you need to put the images inside an array for when you want to change the transparency? For instance if you clicked image 5, but you were wrong and you wanted to press image 4? How can you go back? — Gilko, Dec 27 '14 at 17:07

mplungjan · Accepted Answer · 2014-12-27T17:15:07.147

2

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

edited Dec 27 '14 at 17:15

answered Dec 27 '14 at 17:01

mplungjan

169,008
28
173
236

Changing transparency of items inside array

1 Answers1