Płynny hover po najechaniu obrazka w jQuery

Wrz 21
2012

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

6 komentarzy w “Płynny hover po najechaniu obrazka w jQuery”

  1. Comandeer napisał/a:

    A co powiesz na :hover + transitions w CSS? 😉

  2. Angela napisał/a:

    Myślę, że jest to wręcz doskonały pomysł, korzystam z tego sposobu od jakiegoś czasu.

  3. Anna napisał/a:

    Fajny pomysł 🙂 a co zrobić żeby po najechaniu myszką na środku zdjęcia pojawił się napis?

  4. Anna napisał/a:

    a co zrobić żeby po najechaniu myszką na środku zdjęcia pojawił się napis? jak się taki efekt nazywa?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *