Dar foco a determinada imagem da lista com jQuery
Sabe aquelas listas que exibem algumas imagens um pouco apagadas e quando você coloca o mouse em cima de uma delas ela acende e se destacando das outras? Sempre achei esse efeito muito bacana, mas nunca havia participado de um projeto que pudesse utilizar, eu ficava imaginando milhares de formas muito complicadas para fazer o efeito, sabia que eram complicadas e que deveria existir uma forma mais simples de fazer acontecer, porém nunca parei para pesquisar.
Estudando a documentação do jQuery descobri que é muito mais simples do que eu imaginava e então veio a idéia de escrever esse tutorial.
Em primeiro lugar você vai chamar o framework jQuery no head da sua página web;
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
Agora no corpo do documento vamos criar uma lista de imagens;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <ul class="listaImagens">
<li>
<a href="#" title="Imagem 1">
<img src="img/1.jpg" alt="Imagem 1" title="Imagem 1" />
</a>
</li>
<li>
<a href="#" title="Imagem 2">
<img src="img/2.jpg" alt="Imagem 2" title="Imagem 2" />
</a>
</li>
<li>
<a href="#" title="Imagem 3">
<img src="img/3.jpg" alt="Imagem 3" title="Imagem 3" />
</a>
</li>
<li>
<a href="#" title="Imagem 4">
<img src="img/4.jpg" alt="Imagem 4" title="Imagem 4" />
</a>
</li>
</ul> |
Agora pra finalizar vamos inserir o script que, através do jQuery, produz o efeito;
1 2 3 4 5 6 7 8 9 10 11 12 | <script>
(function($) {
$(document).ready(function() {
$('ul.listaImagens li').stop().fadeTo('fast', 0.3);
$('ul.listaImagens li').hover(function() {
$(this).stop().fadeTo('fast', 1.0);
}, function() {
$('ul.listaImagens li').stop().fadeTo('fast', 0.3);
});
});
})(jQuery);
</script> |
A linha 2 é utilizada para resolver problemas de incompatibilidade com outros frameworks javascript que utilizam o $ como seletor;
Na linha 3 indicamos que o evento deve ser criado assim que o site terminar de carregar;
A linha 4 coloca todas as imagens da lista com opacidade 0.3;
A linha 5 chama diz que ao passar o mouse em uma das imagens a opacidade desta será alterada para 1.0 (100%) e ao retirar o mouse volta a 0.3.
VOcê pode conferir o efeito aqui: Imagem Foco
Se você gostou deste post, escreva um comentário e/ou cadastre-se em nosso feed.
Muito bacana o tutorial!!!
Realmente é um efeito muito legal!