Fonction animate jQuery

**taratata2015** · 19/11/2012, 15h46

Salut à tous

je suis un petit labo jquery pour faire apparaitre un cadre en cliquant sur des liens du menu. Jusque là c'est ok! je butte pour faire disparaitre l'apparition du cadre du lien précédent par le deuxième click sur le deuxième lien qui lui fera apparaître son contenu.

voici mon code test

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-1.8.2.js"></script>
 
<style type="text/css">    
 
#cadremenu {
	position:relative; top:0px; left:0px;
	width: 150px;
	height: 20px;
   display: block;
   border:1px solid blue;
	z-index:10; 
}
 
#rect1 {
	position:relative; top:0px; left:0px;
	width: 0px;
	height: 0px;
   display: block;
   /* border:1px solid blue; */
   background: #f2c11d no-repeat;
	z-index:10; 
}
 
#rect2 {
	position:relative; top:0px; left:0px;
	width: 0px;
	height: 0px;
   display: block;
   /* border:1px solid blue; */
   background: #ff0000 no-repeat;
	z-index:10; 
}
 
</style>
 
<script type="text/javascript"> 
	jQuery(document).ready(function() 
	{
   		$("#dec1").click(function () 
   		{
   			$("#rect1").animate({ 
        width: "70%",
        height: "400px",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em", 
        borderWidth: "10px"
      }, 1500 );
 
       });
 
       $("#dec2").click(function () 
   		{
   			$("#rect2").animate({ 
        width: "70%",
        height: "400px",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em", 
        borderWidth: "10px"
      }, 1500 );
 
       });
   });
</script> 
 
 
 
 
</head> 
 
<body> 
 
<div id="cadremenu">
<span id="dec1">Lien 1</span> 
<span id="dec2">Lien 2</span>
</div>
 
 
  <div id="rect1"></div> 
  <div id="rect2"></div> 
 
</body> 
 
</html>

je cherche à faire apparaitre une div par lien menu et disparaitre l'ancienne div par une nouvelle div du click suivant¨

merci d'avance de vos propositions ou aide...

**SpaceFrog** · 19/11/2012, 16h00

comme ça ?
http://jsfiddle.net/4rDma/

**taratata2015** · 20/11/2012, 20h19

j'aimerai connaitre le therme utilisé pour signifier le type de glissement des feuilles ou DIV du site suivant http://www.freshandfirm.ch. je cherche les bases et les notions nécessaires pour créer mes propres animations. Je me suis aperçu que l'exploitation uniquement des librairies JQUERY necésite des notions javascript pour paramétrer les animations de glissement. Je n'ais aps de notion javascrit donc je fais appelle à quelques âmes généreuse de m'aiguiller pour des sites ou livres pour me former! en bref quel direction dois prendre. merci d'avance de vos réponses.

**SpaceFrog** · 21/11/2012, 08h26

Je me suis aperçu que l'exploitation uniquement des librairies JQUERY necésite des notions javascript pour paramétrer les animations de glissement

Pas étonnant Jquery c'est du javascript ...

**taratata2015** · 21/11/2012, 17h44

svp comment appel t-on le système de glissement du site http://www.freshandfirm.ch ... merci d'avance

**SpaceFrog** · 21/11/2012, 18h36

regardes dans les sources de la page il y a un script mhslideshow, c'est peut etre ça,
sinon c'est un truc codé sur mesure avec des animations au survol

Fonction animate jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager