Timer d'image en jquery

**Laurie.c** · 02/12/2013, 21h58

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

**danielhagnoul** · 03/12/2013, 02h13

Bonsoir

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

**Laurie.c** · 04/12/2013, 18h07

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 !

**Nyleor** · 04/12/2013, 19h34

Consulte la doc : http://api.jquery.com/fadeIn/

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

**Laurie.c** · 04/12/2013, 20h03

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.

**Laurie.c** · 04/12/2013, 22h04

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.

**NoSmoking** · 04/12/2013, 22h12

Bonjour,

J'arrive en cliquant sur un texte, mais impossible en cliquant sur une image.

c'est pourtant la même chose.

J'ajoute une précision qui peut avoir son importance c'est qu'il faut faire attention qu'un élément n'en couvre pas un autre rendant par là même son clic impossible. Cela se gère via la propriété CSS z-Index.

**Laurie.c** · 04/12/2013, 22h20

J'arrive à faire apparaître mon ampoule avec le code que j'ai noté plus haut, grâce à un .toggle

J'ai 2 images superposées justement. Le bouton en haut à droite qui est en mode "off" au début avec une lumière rouge, et quand je clique dessus, il passe en "on" et la lumière ce met en verte (et allume l'ampoule par la même occasion, mais instantanément)

Ça j'y arrive, mais pour mettre des timers, et des apparitions en fondu, impossible.

**Nyleor** · 04/12/2013, 22h43

Est-ce que tu pourrais mettre quelque part les images suivantes, de sorte que je me représente mieux le truc en testant (car je n'ai pas réussi à charger tes screens).

* redbutton.jpg
* greenbutton.jpg
* ampouleoff.jpg
* ampouleon.jpg

**Laurie.c** · 04/12/2013, 22h52

Voici le bouton vert: http://hpics.li/56e81f2

Le rouge: http://hpics.li/4ac50c8

Ampoule off: http://hpics.li/447d1b7

Ampoule on : http://hpics.li/10441d7

Les formats sont les mêmes que j'utilise

**Nyleor** · 04/12/2013, 22h58

Dans le $('#on').click() rajoute ceci et tu vas comprendre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#logoon').fadeIn();

[Edit] Pour être exact, la bonne fonction sera fadeToggle() (c.f. http://api.jquery.com/fadeToggle/).

**Laurie.c** · 04/12/2013, 23h17

Ça marche ! (à moitié mais c'est déjà

)
Quand l'ampoule est éteinte, celle allumé ce retrouve en bas de celle ci, et quand j'active le bouton, il n'y a plus la l'ampoule allumé et bien à son emplacement.

Tu l'avais mi comme ceci?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 $(document).ready(function(){
 
                $("#on").click(function(){
 
                  $(this).find("img").toggle();
                 $("#ampoule").find("img").toggle();
                  $('#logoon').fadeIn();
                 });
 
            });

**Laurie.c** · 04/12/2013, 23h29

C'est bon je me suis simplifiée la vie, j'ai enlevé le ampoule off, et sa rend vraiment mieux !

Juste une petite question, pour la faire disparaître comme elle est venu, c'est aussi un fadeIn ou une commande qui permet d'inverser?

Merci beaucoup en tout cas !
Je vais enfin pouvoir avancer

**Nyleor** · 04/12/2013, 23h34

J'ai édité mon dernier message si jamais.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#ampoule").find("img").toggle();

Le code ci-dessus va simplement inverser les display:block et display:none.

Donc l'ampoule qui est visible va disparaître d'un coup, sans animation, et inversement l'ampoule invisible va apparaître d'un coup, sans animation. Or ce n'est pas ce qu'on veut, donc tu peux simplement virer ce bout de code.

Ce qu'on veut, c'est faire apparaître l'ampoule allumée avec animation. Pour ça je t'ai donné la fonction à utiliser : fadeIn()

Mais comme on veut aussi qu'elle disparaisse, avec animation, lorsqu'on reclique, ce sera plutôt fadeToggle() probablement.

[Edit] Ah ben grillé, mais c.f. mon dernier edit.

**Laurie.c** · 04/12/2013, 23h44

Oui je comprend maintenant !

En tout cas merci beaucoup de m'avoir aidé à comprendre !

Bonne soirée à toi et peut être à la prochaine pour de nouveaux problèmes ! Hahaha

Timer d'image en jquery

jQuery

Discussions similaires

Partager

Partager