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>

点击HANDLER

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

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

Answer 2

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

Answer 3

试试这个：

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

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

3 个答案: