How can I set the duration of this jQuery animation proportionally?

Question

I've created a quick test to show what I'm trying to do:

http://jsfiddle.net/zY3HH/

If you click the "Toggle Width" button once, a square will take one second to grow to full width. Click it again, and it will take one second to shrink down to zero width.

However, click the "Toggle Width" button twice in rapid succession - the second time when the square has grown to only a small fraction of its total width (like 10%) - you'll notice that the animation still takes a full second to return the square to zero width, which looks awkward, IMO.

While that behavior is expected, I'd like the latter animation to happen in an amount of time that's proportional to the width that it's covering. In other words, if you click "Toggle Width" a second time when the square is at 10% of its total width, I'd like it to take about 1/10th of a second to shrink back to zero width.

It should be relatively easy (I think) to make the value of the duration property dynamic, calculated when the jQuery click handler is run, to measure the current width of the square and determine the duration accordingly.

However, am I missing a better way to do this? Does jQuery provide an easy way, or expose some sort of method or property to make this easier?

Answer 1

I don't think jQuery has any built-in utility for doing this. The math required to do what you want is fairly straightforward, however, so I'd suggest just going that route. Something like:

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;
  }
});

Here's a working example: http://jsfiddle.net/zY3HH/2/

If you've got some free time on your hands, maybe you could make the duration interpolation logic a bit more generic and package it up as a jQuery extension/plugin.

Answer 2

This is what you want - 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;
    }
});