Nas últimas semanas tenho me dedicado a escrita de uma série de posts sobre a biblioteca jQuery. A grande vantagem em se escrever uma série como esta, é receber o feedback dos leitores. Feedback é bacana pelos elogios? Sim, também. Mas principalmente pela troca de experiências.
Neste processo de troca de experiências, tenho recebido algumas perguntas sendo que, uma grande concentração destas é semelhante a esta: “Estou tentando utilizar a função fadeIn() do jQuery mas não estou conseguindo. O que devo fazer?”. Este post (que na verdade é mais uma dica) pretende responder a esta questão.
Aplicando o efeito
Se você está acompanhando a série de artigos sobre jQuery desde o início, já pôde perceber que a relação entre a biblioteca e CSS é íntima, portanto, para que o efeito desejado possa ser aplicado corretamente vamos contar com recursos disponibilizados pela linguagem de estilos. A seguir você entenderá o que estou querendo dizer com esta afirmação.
Para que possamos entender o funcionamento da técnica, imagine a seguinte situação: Seu html possui uma div (nomeada sugestivamente aqui como “BoxResposta”) que deverá exibir a mensagem “Carregando… juntamente com um gif loader (indicando por exemplo a resposta de uma requisição assíncrona via AJAX) e você deseja que essa mensagem seja apresentada com o efeito fadeIn do tipo slow. Você pode encontrar várias opções de loaders seguindo este link: http://www.ajaxload.info/. A Listagem 1 apresenta a estrutura HTML e os scripts que permitem que o efeito desejado seja alcançado.
[html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Utilizando o efeito fadeIn do jQuery</title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<style type=”text/css”>
#BoxResposta { width:200px; text-align:center; display:none; }
span { font-family:Georgia, “Times New Roman”; font-style:italic; font-weight:bold; font-size:12px; color:#666; }
</style>
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(“#btnMsg”).click(function () {
jQuery(“#BoxResposta”).html(“<img src=’ajax-loader.gif’ /><br /><br /><span>Carregando…</span>”).fadeIn(“slow”);
});
});
</script>
</head>
<body>
<div id=”BoxResposta”>
</div>
<br />
<br />
<input type=”button” id=”btnMsg” value=”Exibir mensagem com fadeIn()” />
</body>
</html>
[/html]
Listagem 1: Aplicando o efeito fadeIn via jQuery e CSS
Como você pode perceber, o processo é extremamente simples. A explicação dos aspectos fundamentais seguem:
- Linha 5: adicionamos a referência ao arquivo jQuery. VocÊ pode baixar os arquivos da biblioteca clicando aqui.
- Linhas 8 e 9: definimos os estilos a serem adotados pelos elementos HTML em questão (no caso, uma div e os spans). O aspecto a ser ressaltado em relação ao CSS é a propriedade display que neste exemplo está “setada” com o valor none para a div “BoxResposta”. Como mencionado anteriormente, para que o efeito fadeIn possa ser aplicado, o elemento a ser manipulado pelo jQuery necessariamente deve possuir tal propriedade com tal valor definido (mostrando a integração entre as tecnologias para o alcançe de deteminado objetivo).
- Linha 15: injetamos o conteúdo HTML (em nosso caso, uma imagem com o loader e o texto “Carregando…” entre spans) na div “BoxResposta” ao clicar do botão “btnMsg” com a função fadeIn especificando o efeito como slow.
O exemplo em funcionamento pode ser visualizado na Figura 1, apresentada abaixo.
Figura 1: Exemplo da apresentado pela Listagem 1 em execução
Bom pessoal, por hoje é só. Peço que deixe seu comentário sobre esta dica. Se for útil, outras virão :-).
Facebook
Twitter
Instagram
LinkedIn
RSS