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

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

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

Answer 2

试试这个：

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

Answer 3

为什么不保持简单并使用 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 不透明度也适用于图片。

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

Fade in image until another image is clicked

css

jquery

image

jquery-animate