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 :

Effet slideUp et slideDown


Sujet :

jQuery

  1. #1
    Membre actif
    Profil pro
    Inscrit en
    Février 2003
    Messages
    926
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2003
    Messages : 926
    Points : 273
    Points
    273
    Par défaut Effet slideUp et slideDown
    Bonjour,

    Je voudrai masquer temporairement une Div. J'ai fait ce code mais ça marche pas.

    https://jsfiddle.net/v759qzxn/2/ (Je veux masquer la Div verte).

    Auriez-vous une explication à me donner svp.

    Merci à vous.

    Arsène

    Code HTML :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <input id="Masque" type="button" onClick="$();" value="Masquer" />
    <div id="Global">
    <div id="Conteneur">
        <div id="div1"></div>
    </div>   
    </div>

    CODE Jquery :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $("#Masque").click(function () { 
    $('#div1').slideUp(10).delay(1000).slideDown(10);
    });
    Code CSS :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    #Global { 
    width:300px;
    height:100px;
     background-color: yellow;    
    }
     
    #Conteneur { 
     position: absolute;
     background-color: red; 
     width:200px;
     height:100px;
    }
     
    #div1 { 
     width:200px;
     height:40px;
     background-color: green;    
    }

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    slideUp et slideDown possèdent des callbacks ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $("#Masque").on('click', function () { 
    $('#div1').slideUp(1000, function(){ $(this).delay(2000).slideDown(1000); })
    });
    Bien que l'on puisse aussi le gérer sans le call back en etalant bein les temps des slides et du delay
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    $("#Masque").on('click', function () { 
    $('#div1').slideUp(1000).delay(2000).slideDown(1000);
    });
    Mais sans garantie de chainage exacte care si le premier slideDown est plus long que prévu, le delay ne couvrira pas forcement la durée de ce slide.
    Mieux vaut passer par le callback qui s'assure que l'animation slide est complete avant d'effectuer le callback .
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre actif
    Profil pro
    Inscrit en
    Février 2003
    Messages
    926
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2003
    Messages : 926
    Points : 273
    Points
    273
    Par défaut
    Merci beaucoup pour ces 2 codes qui fonctionnent très bien :

    https://jsfiddle.net/v759qzxn/7/

    https://jsfiddle.net/v759qzxn/8/

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    juste une remarque :
    l'exemple de ton premier post sur jsfiddle ne fonctionnera que si t'utilise la version jquery complète, et pas seulement jquery(slim).

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

Discussions similaires

  1. Menu Jquery : SlideUp et SlideDown au Hover
    Par djedje91 dans le forum jQuery
    Réponses: 3
    Dernier message: 03/10/2012, 02h16
  2. slideup et slidedown
    Par tidou95220 dans le forum jQuery
    Réponses: 0
    Dernier message: 08/09/2011, 18h35
  3. utilisation de SlideUp et SlideDown
    Par Macaroni00 dans le forum jQuery
    Réponses: 7
    Dernier message: 07/06/2011, 23h09
  4. EFFET : slideUp partiel sur une div ?
    Par socket77 dans le forum jQuery
    Réponses: 3
    Dernier message: 01/12/2009, 20h12
  5. [Prototype] Effet SlideDown/SlideUp et navigation
    Par Rivoli dans le forum Bibliothèques & Frameworks
    Réponses: 7
    Dernier message: 20/04/2009, 15h29

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