Przeglądając galerie zdjęć dostępnych w Internecie z pewnością zetknęliście się z przypadkiem, kiedy po najechaniu na jakiś obrazek rozświetla się on, bądź odwrotnie, inne stają się ciemniejsze od tego wskazanego kursorem. Efekt ten można osiągnąć stosując standardowy pseudoselektor :hover dostępny w CSS. Jest to jednak metoda pozbawiona dynamicznego przejścia obrazka ze stanu A w stan B. Aby poprawić ten efekt, można posłużyć się prostym skryptem w jQuery.

 

 

Standardowa metoda w CSS

Ustawmy w dokumencie testowy obrazek i nadajmy mu klasę „obrazek„. Standardowo przypiszmy mu własność opacity z wartością 0,5. Po jego najechaniu (:hover) zmieńmy tę wartość na 1. Tym sposobem otrzymamy prosty przykład rozjaśnienia obrazka po jego najechaniu.

 

<html>
<head>
	<title>Plynny hover po najechaniu obrazka w jQuery</title>
	<style type="text/css">
		.obrazek {
			opacity: 0.5;
		}
		.obrazek:hover {
			opacity: 1;
			cursor: pointer;
		}
	</style>
</head>
<body>
 
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
 
</body>
</html>

DEMO

 

To samo, ale w jQuery

Do wykrycia zdarzenia przyda nam się funkcja hover(). Tak jak w poprzednim przykładzie, po najechaniu obrazka kursorem myszy, zmienimy wartość własności opacity z 0.5 na 1. Z tą jednak różnicą, że dynamicznie.

<html>
<head>
	<title>Plynny hover po najechaniu obrazka w jQuery</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('.obrazek').css('opacity', 0.5);
		$('.obrazek').css('cursor', 'pointer');
 
		$('.obrazek').hover(function() { //kursor wchodzi
			$(this).stop().animate({'opacity': 1}, "slow");
		},function() { //kursor wychodzi
			$(this).stop().animate({'opacity': 0.5}, "slow");
		});
	});
</script>
</head>
<body>
 
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
 
</body>
</html>

DEMO

 

To samo, ale na odwrót

Przydatna może okazać się także potrzeba przyciemnienia wszystkich obrazków, oprócz tego najechanego.

<html>
<head>
	<title>Plynny hover po najechaniu obrazka w jQuery</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('.obrazek').css('cursor', 'pointer');
 
		$('.obrazek').hover(function() { //kursor wchodzi
			$('.obrazek').stop().animate({'opacity': 0.5}, "slow");
			$(this).stop().animate({'opacity': 1}, "slow");
		},function() { //kursor wychodzi
			$('.obrazek').stop().animate({'opacity': 1}, "slow");
		});
	});
</script>
</head>
<body>
 
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
 
</body>
</html>

DEMO

Przeczytaj także: