Javascript - 点击淡入淡出元素

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

我什至也尝试了each()，但没有帮助。我被困在哪里？

我的 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>