Menú animado, sólo ejecutar animación cuando se clique
El menú es éste
http://www.newsiteworks.com/test_marc/menuv2niveles/
Cuando haceis click e n cualquier sección funciona perfectamente, se desva nece un a y aparece la otra... todo OK.
El problema está e n cuando hago click otra vez en la sección que tengo visible... me hace como un parpadeo y me repite el efecto de fa de in otra vez...
como podría caparlo para que si está ab ierta la se cción en la que hago click hiciera caso omiso d el código y siguiera mostrándose....?
El code..
<code>
<html>
<head>
<script>link al script de mootools.</script>
<style>
body{
padding:0;
margin:0;
}
#capa0{
width:150px;
height:160px;
background:#ccc;
position:relative;
float:left;
}
#capa1{
position:absolute;
width:150px;
height:160px;
background:red;
opacity:0;
z-index:3;
left:170px;
display:none;
}
#capa2{
position:absolute;
width:150px;
height:160px;
background:Yellow;
opacity:0;
z-index:3;
left:170px;
display:none;
}
#capa3{
position:absolute;
width:150px;
height:160px;
background:Green;
opacity:0;
z-index:3;
left:170px;
display:none;
}
</style>
</head>
<body>
<div>
<div><a href="" id="link1">seccion 1</a><br><br><a href="" id="link2">seccion 2</a><br><br><a href="" id="link3">seccion 3</a></div>
<div>submenu 1</div>
<div>submenu 2</div>
<div>submenu 3</div>
</div>
<script>
var myFunction = function(num){
var i = 1;
var total = 3;
for(i=1;i<total+1;i++){
if($("capa"+i).style.opacity==1){
var ocultar = document.getElementById("capa"+i);
new Fx.Style(ocultar, 'opacity', {duration: 500} ).start(0);
}
}
var div = $("capa"+num).setStyles({
display:'block',
opacity: 0
});
new Fx.Style(div, 'opacity', {duration: 700} ).start(1);
}
$('link1').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(1);
});
$('link2').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(2);
});
$('link3').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(3);
});
</script>
</body>
</html>
</code>
He probado de inicializar una variable con la opción seleccionada y hacer un IF para que solo se ejecute si la variable inicializada es diferente a la que está activa, pero aun teniendo las variables el mismo valor, suda de mi...
Gracias.
jmlweb
añade la clase capa a capa1, capa2 y capa3.
El código Javas cript sería:
<code><script>
var myFunction = function(num){
$$('.capa').each(function(el){
if(el.getStyle('opacity') == 1){
visible = el;
if(el.id!='capa'+num){
var ocultar = el;
new Fx.Style(ocultar, 'opacity', {duration: 500} ).start(0);
}
}
});
if(visible!=$('capa'+num)){
var div = $("capa"+num).setStyles({
display:'block',
opacity: 0
});
}
new Fx.Style(div, 'opacity', {duration: 700} ).start(1);
}
$('link1').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(1);
});
$('link2').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(2);
});
$('link3').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(3);
});
$('capa2').setStyle('opacity', 0);
$('capa3').setStyle('opacity', 0);
window.addEvent('domready', myFunction(1));
</script></code>
markshock
voy a probar lo que me comentas... si quieres puedes mirar el link que había puesto, no se por que se había separada una palabra...
Gracias!!
jmlweb
ya ví el link. Avísame cuando lo tengas solucionado y así sabemos que el tema está cerrado.
Un saludo!
markshock
JML
ya ví el link. Avísame cuando lo tengas solucionado y así sabemos que el tema está cerrado.
Un saludo!
Gracias, pero me da un error...
visible its not defined...
vamos que cuando hace el if(visible... pues como que visible no está definida...... como la querías inicializar?
markshock
??
jmlweb
<code>
<script>
var myFunction = func tion(num){
$$('.capa').each(function(el){
if(el.getStyle('opacity') == 1){
visible = el;
if(el.id!='capa'+num){
var ocultar = el;
new Fx.Style(ocultar, 'opacity', {duration: 500} ).start(0);
}
}
});
if(visible!=$('capa'+num)){
var div = $("capa"+num).setStyles({
display:'block',
opacity: 0
});
}
new Fx.Style(div, 'opacity', {duration: 700} ).start(1);
}
$('link1').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(1);
});
$('link2').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(2);
});
$('link3').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(3);
});
$('capa2').setStyle('opacity', 0);
$('capa3').setStyle('opacity', 0);
window.addEvent('domready', myFunction(1));
</script>
</code>
Perdon ;)
markshock
JML
<code>
<script>
var myFunction = function(num){
$$('.capa').each(function(el){
if(el.getStyle('opacity') == 1){
visible = el;
if(el.id!='capa'+num){
var ocultar = el;
new Fx.Style(ocultar, 'opacity', {duration: 500} ).start(0);
}
}
});
if(visible!=$('capa'+num)){
var div = $("capa"+num).setStyles({
display:'block',
opacity: 0
});
}
new Fx.Style(div, 'opacity', {duration: 700} ).start(1);
}
$('link1').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(1);
});
$('link2').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(2);
});
$('link3').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(3);
});
$('capa2').setStyle('opacity', 0);
$('capa3').setStyle('opacity', 0);
window.addEvent('domready', myFunction(1));
</script>
</code>
Perdon ;)
Jelou JML, disculpa el retraso, por problemas de tiempo tube que dedicarme a tope a otras tareas y dejé esto un poco aparcado...
Veamos, este último bloque de código que has escrito, me da exactamente el mismo error que el anterior y así revisando los 2, no acabo de ver la diferencia entre ellos...
Voy a ver si consigo solventarlo, el único problema es donde inicializar la variable de control "visible"....
un saludo....