Javascript - 點擊淡入淡出元素

Question

我想在單擊元素後更改ul列表中的不透明度。點擊的元素必須保持不透明：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

您可以動畫裏的如下：

$("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>