IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Animation après changement d'image en javascript


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Février 2013
    Messages
    53
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2013
    Messages : 53
    Points : 15
    Points
    15
    Par défaut Animation après changement d'image en javascript
    Hello,

    Je suis en train de faire une liste de menu de restauration avec une image .jpg pour les représenter.

    Voici comment j'ai fait en html
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="large">
    	<img id="menu" src="img/menu_large.jpg">
    </div>
    <div class="little">
    	<img class="menus" src="img/menu1.jpg" onclick="change('img/menu1_large.jpg')" alt="menus">
    	<img class="menus" src="img/menu2.jpg" onclick="change('img/menu2_large.jpg')" alt="menus">
    	<img class="menus" src="img/menu3.jpg" onclick="change('img/menu3_large.jpg')" alt="menus">
    	<img class="menus" src="img/menu4.jpg" onclick="change('img/menu4_large.jpg')" alt="menus">
    	<img class="menus" src="img/menu5.jpg" onclick="change('img/menu5_large.jpg')" alt="menus">
    </div>

    en javascript
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    function change(imageaaffiche){
      document.getElementById('menu').src =imageaaffiche;
    }
    var img = $("#menu");
    var clk = $(".menus");
      clk.on('click', function(){
        img.addClass('active');   
      })
    et en css
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    .active{
    	-webkit-animation:anyname 2s; /* Safari and Chrome */
    }
    @-webkit-keyframes anyname{ /* Safari and Chrome */
    	from {opacity: 0;}
    	to {opacity: 1;}
    }


    la div "large" fait apparaitre en grand le menu sur lequel on a cliqué. Dès que l'on clique sur une autre miniature, l image en grand change.

    Jusqu'ici tout va bien, l image en grand change comme je le veut. Ce que je voudrais, c est d'avoir une transition (une sorte de fadeIn()) entre 2 changements.


    en javascript, j'ajoute une class active qui a pour but de savoir sur qu elle menu nous sommes et de faire les animations necessaire coté css.
    Je ne sais pas si c'est l'heure qui fait ça, mais je n'arrive pas a le faire. Cela marche la premiere fois que je clique mais pas les autres fois.

    Merci ;)

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Ça ne marche pas la deuxième fois car la classe est déjà présente. Il faut que tu la retires à un moment.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Février 2013
    Messages
    53
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2013
    Messages : 53
    Points : 15
    Points
    15
    Par défaut
    Bonjour,

    C'est bien ce que je penser. J'ai essayer de le faire mais je ne sais pas à quel moment retirer la class.

    Faudrait faire une condition ?

    Merci

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Il existe un événement animationend pour détecter en JavaScript la fin d'une animation.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    Février 2013
    Messages
    53
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2013
    Messages : 53
    Points : 15
    Points
    15
    Par défaut
    Merci Bovino, c'est pile poile ce que je chercher .

    Pour ceux qui cherche la solution, je vous mets le code complet

    HTML
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="large">
    	<img id="menu" src="img/menu_large.jpg">
    </div>
    <div class="little">
    	<img class="menus" src="img/menu1.jpg" onclick="change('img/menu1_large.jpg')" alt="menus">
    	<img class="menus" src="img/menu2.jpg" onclick="change('img/menu2_large.jpg')" alt="menus">
    	<img class="menus" src="img/menu3.jpg" onclick="change('img/menu3_large.jpg')" alt="menus">
    	<img class="menus" src="img/menu4.jpg" onclick="change('img/menu4_large.jpg')" alt="menus">
    	<img class="menus" src="img/menu5.jpg" onclick="change('img/menu5_large.jpg')" alt="menus">
    </div>

    CSS
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    .active{
    	-webkit-animation:anyname 1s; /* Safari and Chrome */
    }
    @-webkit-keyframes anyname{ /* Safari and Chrome */
    	from {opacity: 0;}
    	to {opacity: 1;}
    }

    JS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var img = $("#menu");
      var clk = $(".menus");
      clk.on('click', function(){
        img.addClass('active');
        $(img).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ img.removeClass('active'); });
      })
    function change(imageaaffiche){
      document.getElementById('menu').src =imageaaffiche;
    }
    La modification que j'ai faite ce trouve ici
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(img).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ img.removeClass('active'); });
    Grace à ça, a chaque fin d'animation, la class active est supprimer et sera remis au prochain click ce qui va permettre de faire l'animation.

    Encore merci. Je mets en résolu

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Pourquoi .one() ?

    EDIT
    Ah oui, j'ai vu... mais du coup,
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var img = $("#menu");
    var clk = $(".menus");
    clk.on('click', function(){
        img.addClass('active');
    });
    img.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ img.removeClass('active'); });
    function change(imageaaffiche){
      document.getElementById('menu').src =imageaaffiche;
    }
    serait préférable je pense.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 12/04/2014, 23h25
  2. Changement d'image sur un imageButton HTML avec javascript
    Par Shadam dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 08/02/2013, 18h17
  3. changement d'images après une date
    Par saibri dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 14/11/2011, 12h39
  4. Changement de source d'image via javascript
    Par jultoys dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 12/05/2007, 17h33
  5. Comment ne pas rejouer une animation après un clic ?
    Par mmmmhhh dans le forum ActionScript 1 & ActionScript 2
    Réponses: 4
    Dernier message: 04/09/2002, 17h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo