Hover animáció jQuery-vel

2008 október 30 | besorolva: Javascript

Szimpla hover effekt, némi animációval... egyszerűnek tűnik, nem? Valóban egyszerű, de nagyszerű - portfóliókban pl. kifejezetten jól mutathat.

Használata nagyon egyszerű, készítesz egy listát relatív pozícióval, a beillesztett képek abszolút pozíciót kapnak, a hover animációját pedig a jQuery plugin biztosítja.

jQuery hover tutorial

A HTML

Tehát egyszerű listába ágyazzuk a képeket:

1
2
3
4

<ul class="hover_block">
	<li><a href="/"><img src="your_image.gif" alt="alt" /> Text</a></li>
	<li><a href="/"><img src="your_image.gif" alt="alt" /> Text.</a></li>
</ul>

A CSS formázás

A lista elemek pozicionálása relatív, míg a képeké abszolút.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

ul.hover_block li{
			list-style:none;
			float:left;
			background: #fff;
			padding: 10px;
			width:300px; position: relative;
			margin-right: 20px; }
 
		ul.hover_block li a {
			display: block;
			position: relative;
			overflow: hidden;
			height: 150px;
			width: 268px;
			padding: 16px;
			color: #000;
			font: 1.6em/1.3 Helvetica, Arial, sans-serif;
		}
 
		ul.hover_block li a { text-decoration: none; }
 
		ul.hover_block li img {
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
		}

A jQuery kód

1
2
3
4
5
6
7

$(function() {
	$('ul.hover_block li').hover(function(){
	$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
}, function(){
	$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
		});
	});

Az effekt időtartamát lecsökkentheted vagy növelheted a 'duration' opcióval - értelemszerűen nagyobb duration lassabb effektet eredményez.

Mire vársz? Töltsd le vagy nézd meg a demót !

A plugin szerzője Timothy van Sas.

bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Tags: ,

Bejelentkezhetsz meglévő Facebook, vagy Twitter profiloddal is!

6 Comments so far

  1. csoxa Says:
    november 11th, 2008 at 12:25

    Köszí!Ezt láttam már jópá helyen és nagyon tetszik, csak a tudásom erősen korlátozva van html,css,flashre... :) , itt is értem a ezeket a dolgokat csak a jQuery kódot hová kellene beszúrni?Ilyennel még nem próbálkoztam sohasem, köszönöm a választ!

  2. csoxa Says:
    november 11th, 2008 at 12:27

    Közben megnéztem a forráskódot és bejött, hajlamos vagyok hirtelenen buzgóságból, butaságoknak tűnő kérdéseket feltenni,...de azért köszi, ez egy használható applikésön!thx

  3. H.S.László Says:
    november 11th, 2008 at 12:32

    Szia, örülök, hogy megoldódott a kérdés... a demo alapján szerintem minden egyértelmű.

  4. Beau Says:
    november 14th, 2008 at 11:35

    Jópofa :-)
    Mikor ilyen csini dolgokat látok mindíg sajnálom, hogy nem tudom az ÖSSZESET használni egyszerre :-)

  5. csoxa Says:
    január 31st, 2009 at 16:06

    Hello!
    No, eljött az idő, amikor is próbálok egy fancy portfolio oldalt összehozni ezzel a pluginnel!

    DE, valakinek a segítségét kérném... Lightbox-szal http://www.huddletogether.com/projects/lightbox2/ szeretném kombinálni, mégpedig, úgy, hogy az "Ez a szöveg a kép mögötti tartalom, kattintható hivatkozással" helyett "Click for details" és a klikk után a Lightbox fejezné be az effektet, tehát felhoverolna egy képet(ami egyezik a bélyegképpel csak majd 100%ban látszik) amit megadtam és alatta ugye a leírás, lehetséges e?

    Köszönöm

  6. jQuery lightbox plugin | I build websites Says:
    február 3rd, 2009 at 11:45

    [...] Csoxa kérésére megmutatom, hogy lehet az előbb bemutatott lightbox, és az animált hoover plugint együtt használni: [...]

Leave your comment