ayuda con jquery stop / dequeue

Para mi primera incursión real en jquery, elegí un doozie. Quería un "navegador desplegable con una barra de búsqueda desplegable". Después de jugar durante más tiempo del que debería admitir, llegué muy feliz a esto: http://jsfiddle.net/2RqmU/38/

Esto hace todo lo que quiero, tal como lo quiero, con una excepción: el ícono de búsqueda es actividad de cola / flotante, y no puedo encontrar la manera de evitarlo. No me queda claro por qué ".stop (verdadero, falso)". no funciona como lo hace en las animaciones de los otros iconos. Pensé que tal vez este era un trabajo para quitar de la cola, pero eso tampoco ayuda.

¡Cualquier ayuda muy apreciada! Cerca de allí....


No estoy seguro de cuál es la etiqueta apropiada aquí. Solo quería señalar que esto solo se resuelve parcialmente. La respuesta efectivamente detiene la cola, pero un nuevo desplazamiento / desplazamiento obliga al deslizamiento a comenzar de nuevo (desde el lugar de descanso), incluso si no ha regresado a su lugar de descanso. En otras palabras, el deslizamiento se "restablece" inmediatamente al volver a pasar el mouse. Eso hace que se mueva bruscamente en un rápido cambio de posición, antes de que el ícono tenga la oportunidad de regresar a su lugar de descanso. La parada verdadero / falso en las otras animaciones funciona bien a este respecto. Pero no puedo obtener el mismo efecto en el icono de búsqueda, que funciona deslizándose (no con la animación como tal). Gracias.

preguntado el 27 de agosto de 11 a las 19:08

No tengo nada que proporcionar para su problema de jQuery, pero solo quería decir que lo que ha hecho es bonito (* & ^ hábil. -

Solo recuerda agregar un min-width para usted <body> porque se envuelve muy feo si la ventana es pequeña. -

1 Respuestas

Si agrega los dos casos apropiados de .stop(true, true) y cambie la animación de búsqueda a esto, deja de hacer cola para mí:

$('#search-area').hover(function() {
    $('#search-reveal-container').stop(true, true).slideDown(200);
}, function() {
    if (!$('#query').is(':focus')) {
        $('#search-reveal-container').stop(true, true).slideUp({
            duration: 800,
            easing: 'easeOutBounce'
        });
    }
})

Mira aquí: http://jsfiddle.net/jfriend00/WGNa4/

Respondido 28 ago 11, 00:08

Gracias por la respuesta. Eso detiene las colas, pero es inquietante. Si vuelve a colocar el cursor sobre el icono de búsqueda antes de que haya regresado por completo a su "estado de reposo", saltará inmediatamente allí. Tuve ese problema en los otros íconos antes de cambiar de verdadero / verdadero a verdadero / falso para las paradas. Desafortunadamente, verdadero / falso no funciona en esa animación de búsqueda aquí. - user915815

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.