Animatii jQuery pentru text

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

Sa vedem cateva efecte simple pe care le putem atribui unui text folosind jQuery.

1. Modificarea transparentei textului

Sa consideram paragraful urmator.

<p id="animatie1">Acesta este un text de proba.</p>

Vrem ca atunci cand cineva da click pe text, acesta sa devina transparent.

$('#animatie1').click(function() {
	$(this).animate({ opacity: '0.1' }, 500);
});

Sa vedem si rezultatul:

Acesta este un text de proba.

2. Modificarea culorii textului

Vom considera paragraful:

<p id="animatie2">Acesta text isi va schimba culoarea la click.</p>

Pentru acest exemplu vom avea devoie si de un vector care sa contina o serie de culori.

$('#animatie2').click(function() {
	var culoare = ['red', 'blue', 'green', 'black', 'purple', 'pink']
	$(this).css({ color: culoare[Math.floor(Math.random()*5)] });
});

Culoarea va fi schimbata random din vectorul definit. Efectul va arata asa:

Acesta text isi va schimba culoarea la click.

3. Sublinierea unui text

Poate vrem ca la click textul sa devina subliniat? Nimic mai simplu…

<p id="animatie3">Acesta text va fi subliniat la click.</p>

Iar codul va fi:

$('#animatie3').click(function() {
	$(this).css({ "text-decoration": "underline" });
});

La click, paragraful va primi atributul css de subliniere. Efectul va arata asa:

Acesta text va fi subliniat la click.

4. Multiplicarea unui text

Vrem ca la click textul sa se multiplice? Sa consideram paragraful urmator:

<p id="animatie4">Acesta text se va multiplica la click.</p>

Si codul:

$('#animatie4').click(function() {
	var valoare = $(this).text();
	$(this).html(valoare + ' ' + valoare);
});

Efectul va arata astfel:

Acesta text se va multiplica la click.

Nume: jQuery Efecte Text (578B) Descriere: Animatii jQuery pentru text Descarcari: 2 Puncte de activitate necesare: 100 puncte Punctele tale: Nu ai suficiente puncte de activitate (mai multe detalii)

Ti-a placut articolul Animatii jQuery pentru text?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

• jQuery efect de zoom pentru imagini
• jQuery – Notiuni de baza
• jQuery tooltip cu imagini
• Casute animate folosind jQuery
• Sistem multi-language folosind jQuery