jquery - una - Contenido de desplazamiento de un elemento emergente()

ventana modal css jquery

Question

Tengo un botón simple que muestra una lista en vuelo estacionario.

Ejemplo de trabajo

Solo necesito pasar el contenido de la lista, como un menú desplegable. ¿Cómo agrego script para realizar esa función?

HTML

<button id="test">Hover Me</button>
<ul class="tester">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8</li>
</ul>

Guión

$(document).ready(function() {
$("#test").hover(
function () {
$(''.tester'').slideDown(500);
},
function () {
$(''.tester'').slideUp(500);
});
});

Answer 1

¿Quieres hacer esto?

Violín

http://jsfiddle.net/EpV87/25/

acaba de usar slideUp() y slideDown()

Answer 2

Acabo de modificar el código de Scottie para su requisito

$(document).ready(function(){
$("#test").mouseenter(function () {
$(''.tester'').slideDown(500);
});
$(''.tester'').mouseleave(function() {
$(this).slideUp(500);
});
});

http://jsfiddle.net/dolours/mTa6j/

Answer 3

En lugar de usar .hover (), use .mouseenter () en el botón para mostrar el menú y .mouseleave () en el menú para ocultarlo nuevamente.

$(document).ready(function(){
$("#test").mouseenter(function () {
$(''.tester'').show();
});
$(''.tester'').mouseleave(function() {
$(this).hide();
});
});

Edición de su jsbin aquí: http://jsbin.com/iroxop/1/edit

Answer 4

Parece que su problema es que el menú se muestra cuando pasa el mouse por encima del botón, pero desaparece cuando pasa el puntero sobre el menú. Intente envolver el button y los elementos ul en otro div , y adjunte las funciones de desplazamiento al envoltorio. Ejemplo de trabajo en este violín .

$("#menu").hover(
function () {
$(''.tester'').slideDown(500);
},
function () {
$(''.tester'').slideUp(500);
}
);