¿Cómo puedo establecer la duración de esta animación jQuery proporcionalmente?

Question

He creado una prueba rápida para mostrar lo que estoy tratando de hacer:

http://jsfiddle.net/zY3HH/

Si hace clic en el botón "Activar Ancho" una vez, un cuadrado tendrá un segundo para crecer a lo ancho . Haga clic de nuevo, y tomará un segundo encoger hasta el ancho cero.

Sin embargo, haga clic en el botón "Alternar ancho" dos veces en rápida sucesión; la segunda vez cuando el cuadrado ha crecido a solo una pequeña fracción de su ancho total (como 10%), notará que la animación todavía tarda un segundo completo para devolver el cuadrado al ancho cero, lo que parece incómodo, IMO.

Aunque se espera que este comportamiento, me gustaría que la última animación ocurra en una cantidad de tiempo que es proporcional al ancho que está cubriendo. En otras palabras, si hace clic en "Alternar ancho" una segunda vez cuando el cuadrado está al 10% de su ancho total, me gustaría que tardara aproximadamente 1/10 de segundo para reducir de nuevo al ancho cero.

Debería ser relativamente fácil (creo) hacer que el valor de la propiedad duration sea dinámico, calculado cuando se ejecuta el manejador jQuery click, para medir el ancho actual del cuadrado y determinar la duración en consecuencia.

Sin embargo, ¿me falta una forma mejor de hacerlo? ¿JQuery proporciona una manera fácil o expone algún tipo de método o propiedad para facilitar esto?

Answer 1

no creo que jQuery tiene ninguna utilidad integrada para hacer esto. Sin embargo, las matemáticas requeridas para hacer lo que quieres son bastante sencillas, así que te sugiero que sigas esa ruta. Algo así como:

var expanded = false; 
$('input').click(function() { 
    $('div').stop(); 
    var duration; 
    if (expanded) { 
    duration = ($('div').width()/100) * 1000; 
    $('div').animate({ width: '0' }, { queue: false, duration: duration }); 
    expanded = false; 
    } else { 
    duration = ((100 - $('div').width())/100) * 1000; 
    $('div').animate({ width: '100px' }, { queue: false, duration: duration }); 
    expanded = true; 
    } 
}); 

Aquí está un ejemplo de trabajo: http://jsfiddle.net/zY3HH/2/

Si tienes algo de tiempo libre en sus manos, tal vez usted podría hacer que la lógica de la duración de interpolación un poco más genérico y empaquetarlo como una jQuery extension/plugin.

Answer 2

Esto es lo que quiere - http://jsfiddle.net/FloydPink/qe3Yz/

var expanded = false; 
$('input').click(function() { 
    var width = $('div').width(); //gives the current width of the div as a number (without 'px' etc.) 
    if (expanded) { 
     $('div').animate({ 
      width: '0' 
     }, { 
      queue: false, 
      duration: (width/100 * 1000)// (current width/total width * 1 sec in ms)   }); 
     expanded = false; 
    } else { 
     $('div').animate({ 
      width: '100px' 
     }, { 
      queue: false, 
      duration: 1000 
     }); 
     expanded = true; 
    } 
});