Animar as imagens com jQUery

Question

Animar as imagens com jQUery

Estou a tentar aprender a fazer os efeitos que este tipo está a usar no seu site.

Quero mover a imagem da esquerda para a direita e vice-versa.

Como posso fazer isso?

Http://www.adhamdannaway.com/about

0

jquery jquery-animate

Author: Afzaal Ahmad Zeeshan, 2013-09-08

Source

3 answers

score 0 · Answer 1

Leia sobre a função de animação jQuery: http://api.jquery.com/animate/

0

Author: Alex, 2013-09-08 18:09:23

score 0 · Answer 2

Assumindo que o seu HTML com as marcas das imagens é assim:

<img class="left-right" src="img-url.com"/>
<img class="right-left" src="img-url.com"/>

O teu css para isto seria como inicialmente:

.left-right {
   position: absolute;
   left: -100px;
}

.right-left {
   position: absolute;
   right: -100px;
}

Só para ter a certeza que não está na janela, posicionamo-la fora dos limites da moldura.

Então usando a animação jQuery precisamos adicionar um evento:

$(".left-right").focus(function () {
    $(this).animate({left: "0px"}, 1000);
}); 


$(".right-left").focus(function () {
    $(this).animate({right: "0px"}, 1000);
});

Aqui o 1000 é 1000ms sobre o qual o elemento irá animar de seu-100px para 0px.

score 0 · Answer 3

Código de animação a 100% (este código irá funcionar para animar toda a imagem ou div com animação de classe indivisualmente)

<script language="javascript" type="text/javascript">
$(document).ready(function(){

$(".animation").mouseover(function(){
   $(this).animate({
                      height:'200px',
                      width:'200px',
                      left : '-11px'
                    })
                            });

$(".animation").mouseout(function(){
   $(this).animate({
                      height:'178px',
                      width:'178px',
                      left : '0px'
                    })
                            });

});
</script>