0

私がやりたいのは、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/

4

1 に答える 1

2

これを試して

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

更新が点滅しないように、コールバック内に配置することをお勧めします。

于 2014-12-27T17:01:38.623 に答える