淡入圖像，直到其他圖像被點擊

目前我有每個圖像設置爲不透明度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>

click處理

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

來源

2016-01-12 Joe W

也發佈一些'html' –

也顯示點擊處理程序。 – AlexBay

@AlexBay我已經添加了它 –

爲什麼不與簡單的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透明度將工作以及與圖像以及。

來源

2016-01-12 10:07:12 Vincent1989

而CSS是如此mutch更快的JavaScript！很好的例子！ – Zorken17

@ Zorken17這是什麼css3是;-) – Vincent1989

@ Vincent1989感謝這種方式似乎更簡單，我現在已經嘗試過，但當我點擊它改回0.5，一旦我把鼠標從圖像 –

使用$(this).stop().animate(...)如果你需要新的動畫來覆蓋運行一個。這將避免舊的動畫執行直到結束並立即啓動新動畫。

來源

2016-01-12 09:51:56 AlexBay

試試這個：

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

來源

2016-01-12 09:57:09 Zorken17

淡入圖像，直到其他圖像被點擊

回答

相關問題