JQuery efecto easeOutBounce en Barra de Menus Horizontal

Hola a todos, recien estoy empezando a usar jquery y me surgio una pequeña duda, que seguramente para ustedes no va a ser dificil solucionarmela, estoy haciendo un menu horizontal con submenus que se muestran hacia abajo, me funciona bien el efecto al abrir los submenus el tema es que al agregarle el efecto easeOutBounce en la funcion esta me deja de funcionar. el codigo es este:

Código HTML :

<div id="barramenus" class="menu" align="center">
<ul id="Menudes" class="menuhorizontal">
  <li><a href="#">Inicio</a>  </li>
  <li><a href="#" class="submenu">Libreria</a>
    <ul>
      <li><a href="#">Catalogo</a></li>
      <li><a href="#">Promociones</a></li>
      <li><a href="#">Pago y Envio</a></li>
    </ul>
  </li>
  <li><a class="submenu" href="#">Jugueteria</a>
    <ul>
      <li><a href="#">Catalogo</a>      </li>
      <li><a href="#">Promociones</a></li>
      <li><a href="#">Pago y Envio</a></li>
</ul>
  </li>
  <li><a href="#" class="submenu">Cotillon</a>
    <ul>
      <li><a href="#">Catalogo</a></li>
      <li><a href="#">Promociones</a></li>
      <li><a href="#">Pago y Envio</a></li>
    </ul>
  </li>
  <li><a href="#" class="submenu">Art Comp</a>
    <ul>
      <li><a href="#">Articulos</a></li>
      <li><a href="#">Promociones</a></li>
      <li><a href="#">Pago y Envio</a></li>
    </ul>
  </li>
  <li><a href="#">Quienes Somos</a></li>
</ul>
</div>

Código CSS :

#barramenus {
  width:100%; /* Ancho del menú */
  height:65px;
  padding-left:0px;
  background:#333333; /* Color de fondo */
  border-radius:20px; /* Bordes redondeados */
}

.menuhorizontal {
  width: 100%;
  float: left;
  font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
  list-style:none;
  font-size: 100%; /* Tamaño de la fuente */
  font-weight:bolder;
  margin-left: 1%;
}
.menuhorizontal ul {
  float:left;
  height:57px;
  list-style:none;
  table
  margin:0;
  padding:0;
  border-radius: 0px 0px 20px 20px;
  -webkit-border-bottom-right-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px; /* Bordes redondeados del submenú */
}
.menuhorizontal li{
  float:left;
  padding:0px;
  width: 15%;
  white-space:nowrap;
}
.menuhorizontal li a{
background: #0a77d5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0JSIgc3RvcC1jb2xvcj0iIzBhNzdkNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5MGNhZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #0a77d5 4%, #90caf9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#0a77d5), color-stop(100%,#90caf9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #0a77d5 4%,#90caf9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #0a77d5 4%,#90caf9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #0a77d5 4%,#90caf9 100%); /* IE10+ */
background: linear-gradient(to bottom,  #0a77d5 4%,#90caf9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a77d5', endColorstr='#90caf9',GradientType=0 ); /* IE6-8 */
  color: #FFF; /* Color de la fuente */
  display:block;
  font-weight:bolder;
  line-height:250%;
  margin: 2%;
  padding:5px 25px; /* Espacio entre cada pestaña */
  text-align:center;
  text-decoration:none;
  border-radius: 0px 0px 15px 15px;
  -webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.menuhorizontal li a:hover, .menuhorizontal ul li:hover a {
background: #2ab0ed; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYjBlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2U0ZjVmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  #2ab0ed 0%, #e4f5fc 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ab0ed), color-stop(99%,#e4f5fc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2ab0ed 0%,#e4f5fc 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2ab0ed 0%,#e4f5fc 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2ab0ed 0%,#e4f5fc 99%); /* IE10+ */
background: linear-gradient(to bottom,  #2ab0ed 0%,#e4f5fc 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ab0ed', endColorstr='#e4f5fc',GradientType=0 ); /* IE6-8 */

  color:#FFFFFF; /* Color del texto al pasar el cursor */
  text-decoration:none;
}
.menuhorizontal li ul {
  background: #09C; /* Color de fondo del submenú */
  display:none;
  height: auto;
  padding:0px;
  margin:0px;
  position:absolute;
  width:20%; /* Ancho del submenú */
  z-index:100;
  border-top:1px solid #fff; /* Borde superior del submenú */
}
.menuhorizontal li:hover ul{
  display:block;
}
.menuhorizontal li li {
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:100%;
}
.menuhorizontal li:hover li a {
  background:none;
  border-radius: 0px 0px 20px 20px;
  -webkit-border-bottom-right-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px; /* Borde de las subpestañas */
}
.menuhorizontal li ul a {
  display:block;
  height:auto;
  font-size:90%;
  font-style:normal;
  font-weight:bold;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:center;
}
.menuhorizontal li ul a:hover, .menuhorizontal li ul li:hover a{
  background: #3CF; /* Color de las subpestañas al pasar el cursor */
  color:#ffffff;
  text-decoration:none;
}

este es el codigo

Código Javascript :

$(document).ready(function(){
    $('.menu ul ul').css({
      position:"absolute",
      display:"none"
   });
   $('.menu li').hover(function(){
      $(this).find('> ul').stop(true, true).slideDown('slow');
      }, function(){
         $(this).find('> ul ').stop(true, true).slideUp('slow');
         });
});

y esto es lo que estube probando con easeOutBounce pero no logro que funcione:

Código Javascript :

$(document).ready(function(){
    $('.menu ul ul').css({
      position:"absolute",
      display:"none"
   });
   $('.menu li').hover(function(){
      $(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutBounce');
      }, function(){
         $(this).find('> ul ').stop(true, true).slideUp('slow', 'easeOutBounce');
         });
});

El efecto easeOutBounce no es un efecto por omisión de JQuery. Necesitas el plugin Easing para que funcione.

gracias no sabia ese dato, ahora me funciona de 10

Mvkbeguelin escribió:

solucione eso y me aparece otro problema ahora no me sale la animacion del slideUp que estoy haciendo mal?

Código Javascript :

$(document).ready(function(){
    $('.menu ul ul').css({
      position:"absolute",
      display:"none"
   });
   $('.menu li').hover(function(){
      $(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutBounce');
      }, function(){
         $(this).find('> ul ').stop(true, true).slideUp('slow', 'easeOutBounce');
         });
});

Tienes un espacio de más en el selector.

ya me fije y ese no es el problema, gracias igual por la ayuda

los problemas son que no se repiten las animaciones y que el evento onMouseOut no se ejecuta dentro del hover, me empezo a surgir cuando añadi el efecto easeOutBounce a la animacion