[MooTools] Effet Fx.Slide de mootols

salut à tous, j'aimerais bien apprendre à faire des effets que la librairie mootols nous permet de faire, j'ai donc décider de prendre intégralement le tutoriel Fx.Slide Demo du site de mootols pour voir comment cela s'exécute mais seulement il ne fonctionne pas en local et je ne sais pas ce qui ne va pas, j'ai fouiller sur le forum et j'ai vu des problèmes similaire qui n'ont pas été résolu.Aidez moi s'il vous plait !

code html

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="demo.css" type="text/css" />
	<script type="text/javascript" src="demo.js"></script>
	<title>Fx.Slide Demo</title>
</head>
<body>
<h3 class="section">Fx.Slide Vertical</h3>
 
<a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">toggle</a> | <a id="hide" href="#">hide</a>
 
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
<h3 class="section">Fx.Slide Horizontal</h3>
 
<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a> | <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>
 
<div id="test2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
</body>
</html>

code js

Code:

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
 
//-vertical
 
var mySlide = new Fx.Slide('test');
 
$('slidein').addEvent('click', function(e){
	e = new Event(e);
	mySlide.slideIn();
	e.stop();
});
 
$('slideout').addEvent('click', function(e){
	e = new Event(e);
	mySlide.slideOut();
	e.stop();
});
 
$('toggle').addEvent('click', function(e){
	e = new Event(e);
	mySlide.toggle();
	e.stop();
});
 
$('hide').addEvent('click', function(e){
	e = new Event(e);
	mySlide.hide();
	e.stop();
});
 
 
//--horizontal
 
var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
 
$('slidein2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.slideIn();
	e.stop();
});
 
$('slideout2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.slideOut();
	e.stop();
});
 
$('toggle2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.toggle();
	e.stop();
});
 
$('hide2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.hide();
	e.stop();
});

code css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
#test {
	background: #222;
	color: #fff;
	padding: 10px;
	margin: 20px;
	border: 10px solid pink;
}
 
#test2 {
	background: #222;
	color: #fff;
	padding: 10px;
	margin: 20px;
	border: 10px solid pink;
}