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 :

Timer d'image en jquery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre du Club
    Femme Profil pro
    Inscrit en
    Décembre 2013
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 9
    Par défaut Timer d'image en jquery
    Bonsoir à tous

    Je vais d'abord expliquer mon projet pour que vous compreniez.

    J'ai ma page d'accueil, avec une lampe éteinte, et un bouton en haut à droite.

    Quand je clique sur le bouton, l'ampoule apparaît.

    Maintenant ce que j'aimerais faire, c'est faire en sorte que l'ampoule arrive progressivement (comme un fondu), et que d'autre images apparaissent de la même façon, mais seulement après que l'ampoule est fini d’apparaître.

    Pour l'instant je n'arrive qu'a afficher mon ampoule, mais rien de plus. Voici mon code:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $(document).ready(function(){
        $("#on").click(function(){
            $(this).find("img")toggle();
            $("#ampoule").find("img").toggle();
        });
    });
    Merci d'avance

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Piste : fadeIn(), fadeOut, animate().

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre du Club
    Femme Profil pro
    Inscrit en
    Décembre 2013
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 9
    Par défaut
    Voici mon code HTML:

    Code : 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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    <!DOCTYPE html>
    <html>
        <head>
     
            <title>Bienvenue sur mon Portfolio</title>
            <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
            <script>
                $(document).ready(function(){
     
                    $("#on").click(function(){
     
                      $(this).find("img").toggle();
                     $("#ampoule").find("img").toggle();
     
                     });
     
     
                    $(".Name").hover(function(){
                        alert('e');
                    })
     
                });
     
            </script>
     
            <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width">
            <link rel="stylesheet" href="newcss.css" />
     
        </head>
     
        <body>
     
            <p>
                <a href="#" id="on">
                    <img src="redbutton.jpg" alt="red" id="red" style="display:block"/>
     
                    <img src="greenbutton.jpg" alt="green" id="green" style="display: none" />
                </a>
            </p>
     
            <div id="ampoule">
     
            <img src="ampouleoff.jpg" alt="lightoff" id="logo" style="display:block" />
            <img src="ampouleon.jpg" alt="lightoff" id="logoon" style="display: none" />
     
            </div>
     
     
            <p class="Name"> My name </p>
     
            <div id="test">
                <a href="page2.html">
            <p class="welcome"> Welcome </p>
                </a>
            <p class="portfolio"> to my portfolio </p>
     
            </div>
     
        </body>
     
    </html>

    Et mon css:

    Code : 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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    body {
       background-color: black;
       background-attachment: fixed;  
    }
     
    .Name{
       position: absolute;
       left: 10%;
       top: 9%;
       font-family: Caviar Dreams;
       font-size: 250%;
       color: white;
       width: 15%;   
    }
     
     
    #logo, #logoon{
       margin-left: 44%;
       width: 20%;
       float: left;
       width: 14%;
    }
    #red,#green{
       clear: both;
       float: right;
       margin-right: 10%;
       margin-bottom: 5%;
       width: 12%;
    }
     
    .page2 {
       margin-top: 50%;
       margin-left: 80%;
       float: top;
    }
     
    .portfolio{
        position: absolute;
        top: 58%;
        right: 38.9%;
        color: white;
        font-family: Caviar Dreams;
        font-size: 300%;
        text-align: center;   
    }
     
     .welcome{
        position: fixed;
        top: 50%;
        right: 43%;
        color: white;
        font-family: Caviar Dreams;
        font-size: 300%;
        text-align: center;
    }
    .welcome{
        color:transparent;
        text-shadow:0 0 150px #333;
        -webkit-transition : all 2s ease-in;
        -moz-transition: all 2s ease-in;
    }
     
    .portfolio{   
        color:transparent;
        text-shadow:0 0 150px #333;
        -webkit-transition: all 2s ease-in;
        -moz-transition: all 2s ease-in;
    }
    .welcome:hover,
    .portfolio:hover{
        color:white   
    }


    J'ai essayé quelques nouveautés pour voir (Je débute).

    Je vais essayer de vous montrer en image le début de mon projet.

    En premier lieu, la première page qui est affiché est celle ci:





    Donc il n'y a rien, à part le bouton et le bout au milieu.

    Ensuite ce que je veux faire premièrement, c'est faire apparaître l'ampoule progressivement quand on clique sur le bouton en haut à droite, et ce qui donnerais ceci:




    J'ai réussi à faire switcher le bouton, et à faire apparaître l'ampoule. Mais c'est instantané et j'aimerais que l'ampoule arrive progressivement.

    Ensuite, l'ampoule arrivé à son éclairage maximum, j'aimerais faire apparaître ces images ainsi que les textes, progressivement eux aussi.

    Exemple du final:





    Voilà ce que j'aimerais comme rendu final sur ma page d'accueil.

    Si vous pouviez m'expliquer, ou rajouter des commentaires sur un code, cela m'aiderai énormément car je commence tout juste.

    J'ai plutôt bien compris le fonctionnement du HTML, ainsi que le CSS3 (même si je galère pour quelques trucs encore), mais je commence vraiment le Jquery et je n'arrive pas encore à bien comprendre comment il s'écrit et ce qu'il désigne.

    Voilà voilà !

    Merci beaucoup en tout cas de m'aider !

    Et bonne soirée !

  4. #4
    Membre averti
    Homme Profil pro
    Inscrit en
    Septembre 2013
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Suisse

    Informations forums :
    Inscription : Septembre 2013
    Messages : 22
    Par défaut
    Consulte la doc : http://api.jquery.com/fadeIn/

    Il y a sur cette page toutes les réponses pour ce que tu souhaites faire.

  5. #5
    Membre du Club
    Femme Profil pro
    Inscrit en
    Décembre 2013
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 9
    Par défaut
    Merci beaucoup pour ce lien !
    J'ai regardé rapidement, mais on dirait que c'est bien ce que je recherche !

    Je vais tester tout ça.

  6. #6
    Membre du Club
    Femme Profil pro
    Inscrit en
    Décembre 2013
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 9
    Par défaut
    J'ai essayé de nombreux code, et pas moyen de faire marcher !
    J'arrive en cliquant sur un texte, mais impossible en cliquant sur une image.

    Pourriez-vous me montrer juste le début du code? Une fois que j'aurais compris pour une, je pourrais le faire pour le reste.

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

Discussions similaires

  1. Popup zoom image avec jquery
    Par sibile dans le forum jQuery
    Réponses: 3
    Dernier message: 03/04/2017, 11h39
  2. Affichage d'image avec jquery
    Par orion1310 dans le forum jQuery
    Réponses: 4
    Dernier message: 23/12/2011, 15h53
  3. Modifier le path des images dans jquery-ui.css
    Par bertrand0756 dans le forum jQuery
    Réponses: 1
    Dernier message: 13/06/2011, 17h47
  4. Image rotator jquery avec timer
    Par YaKoONeT dans le forum jQuery
    Réponses: 7
    Dernier message: 14/09/2009, 15h49
  5. Zoom sur image avec jquery.
    Par the-destroyer dans le forum jQuery
    Réponses: 2
    Dernier message: 27/07/2009, 10h42

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