MooTools - Transition sinusoïdale
Cela affiche une transition sinusoïdale avec des événements d'entrée, de sortie et d'entrée. Prenons un exemple dans lequel, nous ajoutons unmouse downevent en un élément div avec des événements sinusoïdaux. Jetez un œil au code suivant.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
#sine_in {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#sine_out {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#sine_in-out {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
$('sine_in').addEvent('mousedown', function(event) {
this.set('tween', {duration: 'long', transition: 'sine:in'});
this.tween('width', [80, 400]);
});
$('sine_out').addEvent('mousedown', function(event) {
this.set('tween', {duration: 'long', transition: 'sine:out'});
this.tween('width', [80, 400]);
});
$('sine_in-out').addEvent('mousedown', function(event) {
this.set('tween', {duration: 'long', transition: 'sine:in-out'});
this.tween('width', [80, 400]);
});
});
</script>
</head>
<body>
<div id = "sine_in"> Sine : in</div><br/>
<div id = "sine_out"> Sine : out</div><br/>
<div id = "sine_in-out"> Sine : in-out</div><br/>
</body>
</html>Vous recevrez la sortie suivante -