Hola amigos de Forosdelweb estoy trancado con 2 jQuerys ya hace un par de dias y la verdad que he buscado y encontrado todo tipo de solución, pero no doy con que funcione correctamente.
Tengo 2 jQuery's en un mismo HTML, uno utilizo para el menu que al pasar el mouse por encima se abre una imagen y al salir el mouse la imagen se esconde.
Y el otro es un efecto slider o sea voy pasando imagenes con textos.
La cosa es que por separado me funciona impecable, pero cuando intento unirlos al pasar el mouse sobre el Menu se me abre las imagenes pero no se vuelve a cerrar, o sea no me funciona completamente el menu, sin embargo el slider si funciona.
He probado con el noConflict() pero no le encuentro la vuelta.
Les dejo aqui el codigo porque porque de seguro me estoy comiendo algo que no me doy cuenta.
Desde ya muchas gracias por el aporte de su respuesta.
AQUI EL CODIGO
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>Haiti Oramos por Vos</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<!-- The JavaScript MENU -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'100%',
'height':'100%',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'85px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'100%'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '100%';
if($elem.parent().children().length == $elem.index()+1)
left = '-100%';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
<!-- The JavaScript SLIDER-->
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.pikachoose.js"></script>
<script language="javascript">
jQuery.noConflict();
jQuery(document).ready(function (){
jQuery("#pikame").PikaChoose({transition:[2]});
});
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="contenedor">
<div id="izquierda"><img src="logo.png" align="middle" width="90%"></div>
<div id="cabezal">
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="principal.htm">
<img src="images/home.jpg" width="100%" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Inicio</span>
<span class="sdt_descr"></span> </span> </a> </li>
<li>
<a href="orfanato.htm">
<img src="images/orfanato.jpg" width="100%" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Recuperación</span>
<span class="sdt_descr">de Haití</span> </span> </a> </li>
<li>
<a href="cronograma.htm">
<img src="images/cronograma.jpg" width="100%" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Cronograma</span>
<span class="sdt_descr"></span> </span> </a> </li>
<li>
<a href="respaldan.htm">
<img src="images/respaldan.jpg" width="100%" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Respaldan</span>
<span class="sdt_descr"></span> </span> </a> </li>
<li>
<a href="donaciones.htm"><img src="images/donacion.jpg" width="100%" alt=""/><span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Donaciones</span>
<span class="sdt_descr"></span> </span> </a> </li>
<li>
<a href="contacto.htm">
<img src="images/contacto.jpg" width="100%" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Contacto</span>
<span class="sdt_descr"></span> </span> </a> </li>
</ul>
<div id="centro">
<p> </p>
<div class="pikachoose">
<ul id="pikame" >
<li><a href="http://www.pikachoose.com"><img src="conejos.jpg" width="100%"/></a><span>An example of each transition.</span></li>
<li><a href="http://www.pikachoose.com"><img src="cabras.jpg"/></a><span>Any donation is appreciated. PikaChoose is free to use!</span></li>
<li><a href="http://www.pikachoose.com"><img src="cronograma.jpg"/></a><span>Be sure to check out <a href="http://www.pikachoose.com">PikaChoose.com</a> for updates.</span></li>
<li><a href="http://www.pikachoose.com"><img src="hogar.jpg"/></a><span>You can use any type of html you want with PikaChoose</span></li>
<li><a href="http://www.pikachoose.com"><img src="contacto.jpg"/></a><span>PikaChoose survives on your donations! Keep the project alive with a donation.</ span></li>
</ul>
</div>
</div>
</div>
<div id="derecha">
<div id="Subproyecto">
<h3 align="center" class="style7"><u>Proyectos</u></h3>
<h6 align="center" class="style8 style9">Estos son los proyectos de autosustentabilidad que llevaremos a cabo en Haití, donde se va a realizar un seguimiento nutricional asegurando la correción y prevención de la desnutrición y la malnutrición.</h6>
<h3 align="center" class="style8"><u>Cria de Peces</u></h3>
<div align="center"><img src="peces.jpg" align="bottom" width="90%"><a href="cria_de_peces.htm" target="_self" class="style3 style5">Leer mas..</a></div>
<h3 align="center" class="style8"><u>Cria de Cabras</u></h3>
<div align="center"><img src="cabras.jpg" align="bottom" width="90%"><a href="cria_de_cabras.htm" target="_self" class="style6">Leer mas..</a></div>
<h3 align="center" class="style8"><u>Cria de Conejos</u></h3>
<div align="center"><img src="conejos.jpg" align="bottom" width="90%"><a href="cria_de_conejos.htm" target="_self" class="style6">Leer mas..</a></div>
<h3 align="center" class="style8"><u>Cria de Cerdos</u></h3>
<div align="center"><img src="cerdos.jpg" align="bottom" width="90%"><a href="cria_de_cerdos.htm" target="_self" class="style6">Leer mas..</a></div>
</div>
</div>
<div class="limpiar"></div>
</div>
</body>
</html>
