Utilizar mootools Fx.Styles

ceaped · #1 (**permalink**) 03/04/2008, 12:40

Buenas tardes.

Deseo hacer este ejemplo:
http://demos.mootools.net/Fx.Styles

Hago esto. Pego este código en el html entre el <head></head>

Cita:

Entre las etiquetas <body></body> peo esto:

Cita:

<h3>The always requested hover transition</h3>
<ul id="idList">
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>

</ul>

Y hago un estilo css llamado "style.css".

Que lo pongo en el html asi:

<link href="style.css" rel="stylesheet" type="text/css" />

Cita:

#idList {
margin: 0;
padding: 0;
}

#idList li {
display: block;
margin: 0;
padding: 4px;
width: 120px;
background: #333;
color: #888;
}

Entre el <head></head> este otro código para llamar a la herramienta:

Cita:

Pero no me funciona. Que estoy haciendo mal o que me falta agregarle?.
Gracias por su ayuda

cleek · #2 (**permalink**) 03/04/2008, 15:31

el primer código javascript esta entre los tags de script?

y entre el ondomready?

Código:

<script type="text/javascript"><!--
window.addEvent('domready', function(){

var list = $$('#idList li');
list.each(function(element) {

var fx = new Fx.Styles(element, {duration:200, wait:false});

element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 5,
'background-color': '#666',
color: '#ff8'
});
});

element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0,
'background-color': '#333',
'color': '#888'
});
});

});

};

--></script>

Saludos

ceaped · #3 (**permalink**) 03/04/2008, 15:38

Hola cleek, gracias por ayudarme. Te paso como está todo:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxx</title>

<script type="text/javascript" src="mootools.js"></script>

<script type="text/javascript">
var list = $$('#idList li');
list.each(function(element) {

var fx = new Fx.Styles(element, {duration:200, wait:false});

element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 5,
'background-color': '#666',
color: '#ff8'
});
});

element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0,
'background-color': '#333',
'color': '#888'
});
});

});
</script>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container">
<h3>The always requested hover transition</h3>
<ul id="idList">
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
<li>option 5</li>
<li>option 6</li>
<li>option 7</li>
<li>option 8</li>
<li>option 9</li>

</ul>
</div>

</body>
</html>

ceaped · #4 (**permalink**) 03/04/2008, 18:46

eee que cosa esto he tratado por todos los medios y no logro saber porque no me funciona....

ceaped · #5 (**permalink**) 04/04/2008, 06:40

AAA que descanso problema solucionado.
Lo hice de este tutorial:

http://edenahp.net/tutorial-mootools-1/

Espero que les sirva.

Saludos