Casute animate folosind jQuery

animatii jQuery, efecte jQuery, functii javascript, invata Javascript, invata jQuery, jQuery

Va voi prezenta o metoda simpla de a realiza o animatie pentru o serie de casute. Va poate fi utila in momentul in care prezentati mai multe oferte (hosting, prestari servicii etc.).

Aplicatia finala va arata ca in imaginea de mai jos.

Sa pornim la drum. Pentru inceput vom adauga in pagina 3 div-uri care au definita clasa box.

<div class="box">
	<h1>Casuta numarul 1</h1>
</div>
<div class="box">
	<h1>Casuta numarul 2</h1>
</div>
<div class="box">
	<h1>Casuta numarul 3</h1>
</div>

In fiecare div am adaugat un titlu. Acum sa aranjam putin aspectul acestora.

.box {
	width: 200px;
	height: 300px;
	float: left;
	margin-right: 5px;
	background: #f2f4f9;
	border: 2px solid #555;
	z-index: 1;
}
.box h1 {
	font-size: 22px;
	margin: 10px 0 10px 0;
	padding: 0;
	width: 100%;
	text-align: center;
	text-shadow: 1px 1px 1px #555;
}

Dupa cum vedeti, am folosit si o umbra pentru text.

In acest moment avem casutele frumos aranjate in pagina dar acestea nu sunt interactive inca.

<script type="text/javascript">
jQuery(document).ready(function () {
	$('.box').hover(function() {
		$(this).animate({width: '250px', height: '350px', borderLeftWidth: "5px", borderTopWidth: "5px", borderRightWidth: "5px", borderBottomWidth: "5px"}, 200).css({'box-shadow': '5px 5px 3px #888', 'z-index': '999'});
	}, function() {
		$(this).animate({width: '200px', height: '300px', borderLeftWidth: "2px", borderTopWidth: "2px", borderRightWidth: "2px", borderBottomWidth: "2px"}, 100).css({'box-shadow': '0px 0px 0px #888', 'z-index': '1'});
	});
});
</script>

Acum sunt :)

In primul rand, cand mouse-ul va fi peste unul dintre div-uri, vom anima lungimea si latimea acestuia, grosimea bordurii si ii vom aplica o umbra folosind CSS. Este important sa setam z-index-ul mai mare decat cel initial pentru ca umbra sa fie afisata peste div-urile celelalte.

Cea de-a doua functie nu va face altceva decat sa reseteze toate modificarile facute mai inainte.

Sa vedem cum arata live aplicatia noastra.

Nume: Animatie casute jQuery (629B) Descriere: Animatie pentru evidentierea unor elemente din pagina. Descarcari: 6 Puncte de activitate necesare: 100 puncte Punctele tale: Nu ai suficiente puncte de activitate (mai multe detalii)

Ti-a placut articolul Casute animate folosind jQuery?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

• Schimba fisierul CSS folosind jQuery
• Tastatura virtuala folosind jQuery
• Bifeaza toate checkbox-urile folosind jQuery
• Sistem multi-language folosind jQuery
• Zi si noapte folosind JavaScript si jQuery