Saltando en la animación de ancho de jQuery

Question

Tengo problemas para determinar por qué mi animación está saltando. ¿Algunas ideas?

http://jsfiddle.net/9F5DK/5/

jQuery(document).ready(function() { 

// Animate the single page nav 
    jQuery("a#post-nav-next").hover(

      function(){ 

      jQuery("a#post-nav-next span").stop(true, true).animate({width: "toggle", opacity: "toggle"}); 

     } 
    ); 
}); 

Answer 1

Bien, dediqué un tiempo a descifrar esto. Normalmente no me gusta alterar tanto el html javascript/jquery original y si esto no funciona para usted, entonces me disculpo. Aquí está una jsFiddle que hace lo que quiere ... Creo

http://jsfiddle.net/LqHwk/1/

Lo bueno de esta configuración es que se puede añadir tantos

<div class="post-nav-next"> 

como desee dentro de la envoltura y todos funcionarán igual

BTW Recomiendo usar el plugin jquery hoverIntent.

Answer 2

Problemas que ver:

Configuración de una altura o anchura en una línea <a> o <span> etiqueta en su CSS o en su animación. Lea this article para conocer los problemas al tratar de establecer la altura o el ancho en las etiquetas en línea. Esto se aplica tanto a su CSS como a su animación. Si quieres animar el ancho, creo que vas a necesitar hacerlo en un elemento de bloque.

Me parece que la animación puede confundirse por la alternancia de ancho y opacidad. Tal vez sea mejor que especifiques ambas devoluciones de llamada para suspender y especificar los puntos de inicio y detención de la animación de forma más directa en lugar de dejar el método de alternar para tener que averiguar cuáles deberían ser los puntos de inicio y de detención.

Por ejemplo, sin rehacer el HTML para que sea un bloque de elementos (que creo que es necesario para animar el ancho de manera confiable), aquí hay una animación suave solo en la opacidad. Establecí el punto de partida en el CSS para la opacidad inicial deseada y dejé de usar la opción alternar para configurar la animación y la estoy configurando de forma explícita. No estoy seguro de que esto sea necesario, pero asegura que elimina la ambigüedad de lo que al alternar va a tratar de adivinar lo que desea: http://jsfiddle.net/jfriend00/r2cdn/ (animación de opacidad solo en este jsfiddle, ambas animaciones incluidas en jsfiddle a continuación).

jQuery(document).ready(function() { 

// Animate the single page nav 
    jQuery("a#post-nav-next").hover(function(){ 
      jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "1.0"}); 
     }, function() { 
      jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "0"}); 
     } 
    ); 
}); 

Para el cambio de ancho, ¿en qué dos estados esperaba alternar? Eso no estaba claro para mí como ser humano y probablemente no sea claro para jQuery.toggle() tampoco. Si lo que estás tratando de hacer es animar el relleno correcto, entonces tal vez deberías hacerlo directamente.

Si pongo una animación directa para el relleno y cambio el valor inicial en el CSS, comienza a animarse sin problemas. No estoy 100% seguro de saber qué animación estabas buscando, pero esta debería ser la dirección que puedes seguir: http://jsfiddle.net/jfriend00/PE4qQ/.

jQuery(document).ready(function() { 

// Animate the single page nav 
    jQuery("a#post-nav-next").hover(function(){ 
     jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "1.0", "padding-right": "100px"}); 
     }, function() { 
      jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "0", "padding-right": "0px"}); 
     } 
    ); 
}); 

Answer 3

Después de un tiempo de espera, volví para tener otra oportunidad en esta animación.El efecto final se puede ver aquí:

http://jsfiddle.net/Niels/zrru5/1/

Algunas cosas importantes a notar son los siguientes:

1. Las reglas overflow:hidden oculta las de texto, ya que es contenedor está animado.
2. white-space: nowrap; en el span previene el reflujo del texto.
3. div se deja en su estado predeterminado en carga y se almacena el ancho. Ese ancho se vuelve a aplicar en la animación de desplazamiento.

Alguien mejor en esto que yo haría el js más conciso, pero ya lo tienes. Un buen efecto para la navegación posterior.