re
ben j'ai rien tenté pour le moment
voici le code du fade
- Code: Select all
<!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" />
<script type="text/javascript" src="mootools.js"></script>
<script type>
window.addEvent('domready', function() {
var el = $('myElement');
$('fadeOpacity').addEvent('click', el.fade.bind(el, [0]));
$('tweenOpacity').addEvent('click', function(e) {
e.stop();
el.fade(1);
});
$('tweenOpacity1').addEvent('click', function(e) {
e.stop();
el.fade(0.3);
});
});
</script>
<title>Effects Introduction</title>
<style type="text/css">
div.demoElement {
width: 80px;
height: 80px;
border: 1px solid black;
background-color: #f9f9f9;
font-size: 12px;
color: #000000;
padding: 10px;
}
div.demoElementHeight {
height: 120px;
}
.myClass {
width: 300px;
height: 50px;
border: 3px dashed black;
background-color: #C6D880;
font-size: 20px;
padding: 20px;
}
</style>
</head>
<body>
<p>
<a href="#" title="Fading opacity" id="fadeOpacity">Fade opacity to 0</a>
|
<a href="#" title="Tween opacity to 1" id="tweenOpacity">Tween opacity to 1</a>
|
<a href="#" title="Tween opacity to 0.3" id="tweenOpacity1">Tween opacity to 0.3</a>
</p>
<div id="myElement" class="demoElement">
</div>
</body>
</html>
donc j'aimerai qu'au chargement de la page il y est un effet fade sur le div, c'est à dire qu'il passe de la valeur 0 à 1 par exemple
et sinon pour le slide
- Code: Select all
<!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" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//-vertical
var myVerticalSlide = new Fx.Slide('vertical_slide');
$('v_slidein').addEvent('click', function(e){
e.stop();
myVerticalSlide.slideIn();
});
$('v_slideout').addEvent('click', function(e){
e.stop();
myVerticalSlide.slideOut();
});
$('v_toggle').addEvent('click', function(e){
e.stop();
myVerticalSlide.toggle();
});
$('v_hide').addEvent('click', function(e){
e.stop();
myVerticalSlide.hide();
$('vertical_status').set('html', status[myVerticalSlide.open]);
});
$('v_show').addEvent('click', function(e){
e.stop();
myVerticalSlide.show();
$('vertical_status').set('html', status[myVerticalSlide.open]);
});
// When Vertical Slide ends its transition, we check for its status
// note that complete will not affect 'hide' and 'show' methods
myVerticalSlide.addEvent('complete', function() {
$('vertical_status').set('html', status[myVerticalSlide.open]);
});
});
</script>
<title>Fx.Slide Demo</title>
<style type="text/css">
h3.section {
margin-top: 1em;
}
#vertical_slide, {
background: #D0C8C8;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
}
div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}
</style></head>
<body>
<div class="marginbottom">
<a id="v_slideout" href="#">slide out</a>
|
<a id="v_slidein" href="#">slide in</a>
|
<a id="v_toggle" href="#">toggle</a>
</div>
<div id="vertical_slide">
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>
ben pareil que l'autre, quand la page se charge un div apparait automatiquement en slideIn par exemple
désolé de t'abreuver de code
mais c toi qui l'a voulu
merci bcq rad pour ta disponibilité
@++
paps
ps : au fait j'ai oublié de te dire !! ya quelque temps j'avais mit un post sur une recherche d'opacity sur une div valide css2.1 et que tu m'avais dit que yavait pas pour le moement !!
hé bien j'ai trouvé figure toi et ca marche du feu de dieu !!
c'est la fonction applyOpacity de mootools !!!
d'où mon archarnement à continuer de travailler avec cette library plutot qu'une autre
sans pour autant m'y connaitre en javascript