jquery - 淡入图像直至单击另一张图像

Question

目前，我将每个图像的不透明度设置为 0.5，但是当我单击一个图像时，我希望将其更改为 1，然后在单击另一图像时返回到 0.5。我还有一个悬停功能，可以在悬停时改变不透明度，这两个功能会互相干扰吗？

我目前有

$(document).ready(function(){
    $("#nav li a").hover(function() {
        $(this).animate({opacity: '1'}, "slow");
    }, function () {
        $(this).animate({opacity: '0.5'}, "slow");
    });
});

HTML

<div id="tabmenu">
    <ul id="nav">
        <li><a href="#" class="active">Pavan Suryaprakash</a></li>
        <li><a href="#">Nikhil Bansal</a></li>
        <li><a href="#">A D Dheeraj</a></li>
        <li><a href="#">Rohan Chawla</a></li>
        <li><a href="#">Neelam Agarwal</a></li>
        <li><a href="#">Ipshita Ghoshdastidar</a></li>
        <li><a href="#">Sumit Kumar</a></li>
        <li><a href="#">Abhimanyu Sharma</a></li>
        <li><a href="#">Vivek Ranjan Gupta</a></li>
        <li><a href="#">Shrish Mishra</a></li>
        <li><a href="#">Priyadarshini</a></li>
        <li><a href="#">Rajesh Dass</a></li>
        <li><a href="#">Gaurav Prakash Pandey</a></li>
        <li><a href="#">Diana Varghese</a></li>
        <li><a href="#">Sagar Dharwar</a></li>
        <li><a href="#">Saloni Chadha</a></li>
        <li><a href="#">Subhra Shaw</a></li>
        <li><a href="#">Sweety Gupta</a></li>
        <li><a href="#">Trishendu Deb</a></li>
        <li><a href="#">Gunjan Tekriwal</a></li>
        <li><a href="#">Rakesh Sahu</a></li>
        <li><a href="#">Karthik Sivaraman</a></li>
        <li><a href="#">Sumit Vats</a></li>
        <li><a href="#">Subhash Agarwal</a></li>
        <li><a href="#">Bina Rajput</a></li>
    </ul>

点击处理程序

$("#nav li a").click(function() {
        $(this).animate({opacity: '1'}, "slow");
    });

Answer 1

为什么不保持简单并使用 CSS 动画和简单的 javascript 来代替呢？

http://codepen.io/vincentccw/pen/wMeXvB

对于你的CSS:

a{
 -webkit-transition: opacity 0.4s ease;
 -moz-transition: opacity 0.4s ease;
 -o-transition: opacity 0.4s ease;
 transition: opacity 0.4s ease;
}

#nav li a{
  opacity:.5;
}

#nav li a.currentClick{
  opacity:1;
}

#nav li a:hover{
  opacity:1;
}

对于您的 JavaScript:

$(document).ready(function(){

  $("#nav li a").click(function() {
      $("#nav li a").removeClass("currentClick");
      $(this).addClass("currentClick");
  });

});

如果您正在使用图像，只需替换 <a>元素与图像一起使用，因为 CSS 不透明度也适用于图像。