[Résolu] Animation Hover en jQuery

Hey !

Je suis en train de créer un site perso, et je veux que deux images (qui sont collées au départ) au survol de la souris se déplacent chacune de leur coté respectif pour que en quelque sorte l'image de base soit ouverte en deux.

Code HTML :

<div id="imgctr">
  <img src="Thomas.png" id="thomas">
  <img src="Guy-Man.png" id="guy">
</div>

J'ai donc du utiliser le jQuery pour gérer ce déplacement lorsque les deux images sont survolées...mais le problème c'est que je ne connais absolument pas le jQuery, j'ai donc fait cette esquisse avec ce que j'ai trouvé sur le site officiel :

<script>

jQuery(document).ready(function(){
    $('.imgctr').mouseover(function(){
         $('#thomas').slideToggle({ duration: 100, easing: 'easeInCubic'});{
            left: '50px'
      }  $('#guy').slideToggle({ duration: 100, easing: 'easeInCubic'});{
            right: '50px'
        });
    });
});
</script> 

Si j'ai bien compris le "hover" se transforme en "mouseover" en jQuery.

Mon problème est que mes deux images ne bougent pas d'un pouce...
Il y a sans doutes des erreurs dans ce code, mais je ne les trouve pas

Merci d'avance pour vos réponses !
Modifié par HexaGo (08 Sep 2015 - 23:11)

Bonjour,

Je vais peut-être répondre à côté, mais tu peux également le faire en CSS.
NB : tu n'es pas obligé d'utiliser les <div> entourant les <img> dans mon exemple si tu utilisent deux images différentes.

Sinon, en jQuery, il y a plusieurs manières de faire, simplement avec le toggleClass de jQueryUI, sinon animer sur le margin-left/right ou left/right au mouseenter/mouseleave.

Merci pour ton code !
ça fonctionne nickel, par contre j'aimerais que mes deux images lorsqu'elle arrive au bord de l'écran s'arrêtent de s'éloigner (qu'elles ne dépassent pas les bords). C'est un problème de responsive, mais comme faire comprendre à l'image qu'elle doit s'arrêter tout le temps au bord ?

Ah pour ça, il va falloir gérer ton animation en fullJS, tu ne vas pas pouvoir le faire en CSS.
Pour bien comprendre ce que tu veux, essaie de peut-être faire un schéma, parce que beaucoup de questions se posent (est-ce que les deux images sont centrées horizontalement sur la page ? si non, est-ce que le déplacement des deux images doit s'arrêter si l'une des deux arrive au bord ? ... )

Désolé du retard de la réponse ! J'avais un peu moins le temps de bosser dessus...

En fin de compte j'ai réussi à faire ce que je désirais, c'est entièrement en CSS, je me suis servi de la fonction Hover et du déplacement Cubic-Bézier.

Merci pour les conseils, je me ferais des croquis à l'avenir !
Modifié par HexaGo (31 Oct 2015 - 10:51)