更改数组内项目的透明度

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

您可能希望在回调中放置一个没有闪烁的更新