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

jQuery Discussion :

Animation : déplacement div d'une même class


Sujet :

jQuery

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2018
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2018
    Messages : 8
    Points : 6
    Points
    6
    Par défaut Animation : déplacement div d'une même class
    Bonsoir à ceux qui me liront et bonne année

    C'est mon premier post sur ce forum; heureux d'être parmi vous


    Je suis en train de me créer un portfolio et pour en faire un sympa j'ai envie de mettre des animations sympas avec des "blocs à tirer"

    Sauf que pour faire ça je suis obligé d'utiliser un peu de javascript car je me rend compte que je suis obligé de cibler mon bloc parent. Le problème c'est que j'y connais rien en javascript et là j'ai peu de temps pour le finaliser alors je suis allé faire quelques recherches et j'ai trouvé quelques pistes mais je reste bloqué.

    Pour que vous puissiez mieux visualiser tout ça voici mon code : http://jsfiddle.net/Te9T5/2549/

    En gros j'aimerai que quand je clique sur une checkbox, le parent (donc "article") soit déplacé sur la droite.

    Si vous visualisez toujours pas voici un bout de code qui avait fonctionner mais ça ne me satisfait pas car étant donné que j'utilise les mêmes classes pour mes blocs, les animations se font sur tous les blocs en même temps ce qui ne me va pas. http://jsfiddle.net/Te9T5/2548/

    C'est pour ca que j'ai eu l'idée d'utiliser les checkbox. Je me dis qu'il y a peut être moyen de cibler uniquement le parent des checkbox cochés mais mon Jquery ne fonctionne pas. Quelqu'un pour m'aider ?

    Merci à vous

    Thibault

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 234
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 234
    Points : 15 531
    Points
    15 531
    Par défaut
    voilà comment faire fonctionner cela, j'ai indiqué les modifications en commentaire dans le code

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // le sélecteur "input[type=\"checkbox\"]" est une chaine de caractère
    $("input[type=\"checkbox\"]").click(function (e) { // code lancé lors d'un clic sur la case à cocher
     
        if ($(this).is(":checked")) { // test si l'élément courant est coché
            $(this).parent().addClass('clicked'); // ajout de la classe sans le "." devant
        } else {
            $(this).parent().removeClass('clicked');
        }
     
    });
    gardez toujours sous la main la documentation de jQuery, elle contient plein d'exemples de code :
    http://api.jquery.com/

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2018
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2018
    Messages : 8
    Points : 6
    Points
    6
    Par défaut
    Merci beaucoup !!!!

    C'est niquel et je comprend à peu près à une chose près. Je préfère te demander pour éviter de copier bêtement..

    Pourquoi est on obligé d’utiliser une fonction dans ce cas là ? Pourquoi est ce qu'on ne peut pas faire ça par exemple ? http://jsfiddle.net/543jh7y3/1/

    Est ce que l’événement "case coché" ne peut être vérifié qu'après un clic ?

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 234
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 234
    Points : 15 531
    Points
    15 531
    Par défaut
    Citation Envoyé par kkelkun Voir le message
    Pourquoi est ce qu'on ne peut pas faire ça par exemple ? http://jsfiddle.net/543jh7y3/1/
    ce code est juste exécuté une fois au démarrage de la page.
    il faut ensuite ajouter le traitement qui se lance à chaque évènement et ce que fait le code jQuery avec "on" et ses raccourcis comme "click" :
    http://api.jquery.com/on/
    http://api.jquery.com/click/

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2018
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2018
    Messages : 8
    Points : 6
    Points
    6
    Par défaut
    C'est d'accord, tout est clair

    Merci encore infiniment, ça me fait plaisir de voir de rencontrer des gens comme toi, aussi volontaires !

    Ça me redonne presque foi en l'humanité...

    Passes une bonne journée

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

Discussions similaires

  1. Réponses: 7
    Dernier message: 22/10/2006, 18h51
  2. Réponses: 11
    Dernier message: 05/10/2006, 13h20
  3. Réponses: 15
    Dernier message: 19/06/2006, 19h25
  4. Réponses: 3
    Dernier message: 15/05/2006, 19h04
  5. [Applet]Utiliser plusieurs Applet dans une même classe
    Par BRAUKRIS dans le forum Applets
    Réponses: 5
    Dernier message: 11/06/2004, 15h27

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