logo

Shake Things Up pomocí Shake Effect jQuery UI

Včera jsem vytvořil tutoriál, který vám ukazuje, jak můžete zatřást prvkem pomocí Fx.Shake, komponenty MooTools, kterou napsal Aaron Newton. Ukázalo se, že uživatelské rozhraní jQuery má také efekt chvění, který může přitáhnout pozornost k prvku.

Zobrazit ukázku

XHTML

<div id="shaker">
<a href="https://davidwalsh.name"><img src="/demo/mootools-shake.png" alt="David Walsh Blog" /></a>
</div>

Úplně stejné jako moje metoda MooTools.

CSS

#shaker		{ position:fixed; top:10px; right:10px; width:299px; height:253px; display:none; }

Také přesně stejné jako moje metoda MooTools.

JavaScript jQuery

function periodical() {
	$('#shaker').effect('shake', { times:3 }, 200);
}
$(document).ready(function() {
	$('#shaker').hide().css('display','').fadeIn(600);
	var shake = setInterval(periodical, 5000);
	
	/* updated: click clear */
	$('#shaker').click(function() {
		clearInterval(shake);
	})	
});

Kód je v podstatě přesně stejná logika přenesená do syntaxe a metodologie jQuery. Pamatujte, že k tomu potřebujete uživatelské rozhraní jQuery.

Zobrazit ukázku

Na vytváření těchto výukových programů se mi líbilo, že jde o dokonalé příklady toho, jak flexibilní tyto dvě knihovny jsou. Oba mi umožnili vytvořit stejnou funkcionalitu ve velmi malém kódu. Lidé by se neměli soustředit na „jQuery proti MooTools“, lidé by se měli zaměřit na „jQuery nebo MooTools.“

Aktualizace:Klikněte na Vymazat

Přidal jsem vymazání intervalu (a tím zastavení třepání), jakmile uživatel klikne na prvek.