Question

我想点击一个元素后更改ul li列表中的不透明度。点击的元素必须保持不透明度：1，其余部分应淡出不透明度：0.3 单击其他元素后，此元素应为1，其余元素为0.3，依此类推。

我尝试了以下代码，但它没有按照我的意愿工作：

$(this).toggle(function(){
            $(this).siblings().animate({opacity:0.3}, 1000);
        }, function() {
            $(this).siblings().stop().animate({opacity:1}, 1000);
        });

我甚至尝试了每个（），没有帮助。我被困在哪里？

我的HTML：

<div class="tracklist">
            <div class="left">
                <ul>
                    <li class="one" id="t01"></li>
                    <li class="two"></li>
                    <li class="three"></li>
                    <li class="four"></li>
                    <li class="five"></li>
                </ul>
            </div>
            <div class="right"></div>
        </div>

Answer 1

您可以按如下方式为li设置动画：

$("ul li").on("click", function(){
    $(this).animate({"opacity": "1"});
    $(this).siblings().animate({"opacity": "0.3"});    
});

li {
    margin: 2px;
    padding: 5px;
    background-color: #aaf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="one" id="t01">textA</li>
    <li class="two">textB</li>
    <li class="three">textC</li>
    <li class="four">textD</li>
    <li class="five">textE</li>
</ul>

Javascript - 点击淡化元素

1 个答案: