Pinceladas da Web

Esse efeito de Accordion que vou mostrar aqui hoje pode ser usado não somente para menus, mas também para outras finalidades. É muito simples conseguir esse tipo de efeito utilizando a jQuery, que proporciona uma simplicidade ao escrever código JavaScript. A marcação HTML utilizada nesse exemplo é a seguinte:

<dl>
	<dt><a href="http://www.pinceladasdaweb.com.br/blog/">Pinceladas da Web</a></dt>
	<dd>
        <ul>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/css/">CSS</a></li>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/xhtml/">XHTML</a></li>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/webstandards/">WebStandards</a></li>
        </ul>
	</dd>
	<dt><a href="http://www.cssnolanche.com.br">CSS no Lanche</a></dt>
	<dd>
        <ul>
            <li><a href="http://www.cssnolanche.com.br/categoria/css/">Tutoriais CSS</a></li>
            <li><a href="http://www.cssnolanche.com.br/categoria/javascript/">JavaScript</a></li>
            <li><a href="http://www.cssnolanche.com.br/categoria/jquery/">jQuery</a></li>
        </ul>
	</dd>
	<dt><a href="http://www.jquery.com">jQuery</a></dt>
    <dd>
        <ul>
            <li><a href="http://docs.jquery.com/Downloading_jQuery">Download</a></li>
            <li><a href="http://docs.jquery.com/">Documentação</a></li>
            <li><a href="http://docs.jquery.com/Tutorials">Tutoriais</a></li>
        </ul>
    </dd>
</dl>

Continuar lendo »

Você provavelmente já deve ter passado por esse tipo de problema utilizando o framework jQuery para fazer animações nos elementos de sua página, o problema ocorre principalmente quando se deseja criar menus animados, onde através da função animate() da jQuery ao passar o mouse rapidamente pelo menu, o efeito pode ser executado ainda diversas vezes mesmo após você retirar o mouse.

Para que fique claro a natureza do problema, basta você acessar esse exemplo criado e experimente passar o mouse rapidamente diversas vezes encima do menu. Você verá que mesmo após retirar o mouse, o efeito de animate() ainda é executado.

Observe abaixo o código JavaScript com a utilização da jQuery para o efeito do menu:

$(document).ready(function() {
	$('ul.anim_queue a')
		.hover(function() {
		$(this).animate({ left: 20 }, 'fast');
		},function(){
		$(this).animate({ left: 0 }, 'fast');
	});
});

Para evitar esse problema indesejável, basta utilizar a função stop(). Agora vamos ao código final sem problemas de animação:

$(document).ready(function() {
	$('ul.anim_queue a')
		.hover(function() {
		$(this).stop().animate({ left: 20 }, 'fast');
		},function() {
		$(this).stop().animate({ left: 0 }, 'fast');
	});
});

Agora observem o exemplo com o código corrigido. Como você pode ver, a animação só ocorre uma vez, mesmo após você passar rapidamente o mouse sobre o menu, evitando assim o problema anterior.

Esse post foi escrito com base no artigo original de Brandon Aaron