Hoje trabalharemos uma efeito super simples de ser implementado mas que dá uma oportunidade de incrementação bacana em seu projeto web: Uma imagem, ao receber o hover do usuário, deslizará, mostrando outra imagem. Quando o usuário retirar o mouse, a imagem inicial é mostrada novamente – clique aqui para ver o efeito funcionando.

O primeiro passo será  a montagem do HTML. Defina uma div e dentro dela coloque duas imagens quaisquer, identificando-as com classes ou ids. No exemplo acima utilizei uma div principal e dentro dela três divs, com duas imagens em cada.

<div class="principal">
<div class="trocar"><img class="back" src="images/im_01_back.jpg" alt="imagem" />
<img class="front" src="images/im_01.jpg" alt="imagem" /></div>
<div class="trocar"><img class="back" src="images/im_02_back.jpg" alt="imagem" />
<img class="front" src="images/im_02.jpg" alt="imagem" /></div>
<div class="trocar"><img class="back" src="images/im_03_back.jpg" alt="imagem" />
<img class="front" src="images/im_03.jpg" alt="imagem" /></div>
</div>

Com a marcação HTML pronta definiremos o estilo. Aqui o único estilo realmente necessário para a ‘animação funcionar’ deverá ser aplicado na div que contém as duas imagens, com indicação de estas devem se sobrepor. Para isso defina a posição da imagem como no exemplo abaixo, e overflow hidden na div mãe.

.trocar img{
position:absolute;
top:0;
left:0;
width: 250px;
height:150px;
}

.trocar{
width:270px;
height:150px;
float:left;
position:relative;
overflow:hidden;
padding: 5px;
}

Com isso, após inserir o link da biblioteca jQuery em sua página, vamos trabalhar o script. Como foi dito anteriormente, que será feito é muito simples: Com as imagens estão posicionadas uma em cima da outra, ao hover na div, a imagem da frente terá sua posição alterada. Coloque para top um valor superior ao tamanho de sua div, caso queira que a imagem “caia”; caso preferir, sete o valor de top para negativo e a imagem deslizará para cima. Assim que o usuário retira o mouse da div, a imagem da frente tem seu valor de top retornado à zero. Para evitar que qualquer animação esteja acontecendo no momento, utilizamos ainda o comando stop(), cancelando qualquer comando em execução no momento e alterando seu valor de top.

$(function() {
$('.trocar').hover(
function(){
$(this).children('.front').stop().animate({"top" : '300px'},700); //Trabalha no hoverIn
},
function(){
$(this).children('.front').stop().animate({"top":'0'},400); //Trabalha no hoverOut
});
});

Prontinho! Um efeito simples mas ao mesmo tempo bacana e que pode ser aplicado em seu projeto web em questão de minutos!

Para baixar os arquivos desse tutorial, clique aqui!

// Comente!

comentários