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

Posted 2023-05-08

【中文标题】淡入图像，直到单击另一个图像

【英文标题】：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 标签中

【参考方案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");
    );
);