淡入图像，直到单击另一个图像答案

【问题标题】：Fade in image until another image is clicked淡入图像，直到单击另一个图像
【发布时间】：2016-04-16 20:41:56
【问题描述】：

目前我将每个图像的不透明度设置为 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");
    });

【问题讨论】：

也发布一些html
也显示点击处理程序。
@AlexBay 我已经添加了
有锚标签没有图片显示。
@ketan 将图片加载到 a 标签中

标签： jquery css image jquery-animate

【解决方案1】：

为什么不保持简单，而是使用带有简单 javascript 的 CSS 动画？

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 不透明度也适用于图像。

【讨论】：

而且 css 比 javascript 更快！很好的例子！
@Zorken17 这就是 css3 的用途 ;-)
@Vincent1989 谢谢这种方式似乎更简单，我现在已经尝试过了，但是当我点击它时，一旦我将鼠标从图像上移开，它就会变回 0.5
已排序，已被覆盖，谢谢！

【解决方案2】：

如果您需要新动画覆盖正在运行的动画，请使用$(this).stop().animate(...)。这将避免旧动画一直执行到结束并立即开始新动画。

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：