javascript - 更改数组内项目的透明度

Question

我想要做的是改变jpg的透明度。我已将 ul li img 放入数组中。

当我单击图像时，我可以在控制台中看到所单击图像在数组内的位置。

现在，当我单击图像时，我想更改该图像的透明度以及单击图像之前的图像的透明度。

例如:当我单击位于数组内 4 的图像时。我希望数组内的项目 0、1、2、3 和 4 的透明度设置为 1。如何访问数组中被单击项目的 css？

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

图书馆

我正在使用 jquery-transit:

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

Answer 1

试试这个

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

您可能希望在回调中放置一个，以免出现闪烁更新