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.

Timer d'image en jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager