Как анимировать непрозрачность элемента при наведении курсора мыши с помощью jQuery
Вы можете использовать jQuery-методы animate(), mouseenter() и mouseleave() в сочетании с CSS-свойством opacity, чтобы анимировать непрозрачность элемента при наведении курсора мыши.
Давайте посмотрим следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Animate Opacity on Hover</title>
<style>
ul{
padding: 0;
list-style: none;
}
ul li {
float: left;
margin: 10px;
}
ul li a img{
opacity: 0.3;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script> $(document).ready(function(){ $("a").mouseenter(function(){ $(this).find("img").finish().animate({ opacity: "1" }); }).mouseleave(function(){ $(this).find("img").finish().animate({ opacity: "0.3" }); }); });
</script>
</head><body> <ul> <li><a href="#"><img src="club.jpg" alt="Club Card"></a></li> <li><a href="#"><img src="diamond.jpg" alt="Diamond Card"></a></li> <li><a href="#"><img src="spade.jpg" alt="Spade Card"></a></li> <li><a href="#"><img src="heart.jpg" alt="Heart Card"></a></li> </ul></body></html>
