如何按比例設置這個jQuery動畫的持續時間？

Question

我創建了一個簡單的測試，以顯示我想要做的事：

http://jsfiddle.net/zY3HH/

如果單擊一次「切換寬度」按鈕，廣場將採取一秒成長爲全寬。再次單擊它，它將需要一秒鐘縮小到零寬度。

但是，快速連續兩次單擊「切換寬度」按鈕 - 第二次當正方形增長到其總寬度的一小部分時（例如10％） - 您會注意到動畫仍然需要整整一秒鐘的時間將廣場歸零，這看起來很尷尬，國際海事組織。

雖然這種行爲是預期的，但我希望後面的動畫發生的時間量與它所覆蓋的寬度成正比。換句話說，如果再次單擊「切換寬度」時，如果平方的寬度爲總寬度的10％，我希望它大約需要1/10秒才能縮回到零寬度。

當運行jQuery click處理程序時計算duration屬性的值應該相對容易，以測量當前的平方寬度並相應地確定持續時間。

但是，我錯過了一個更好的方法來做到這一點？ jQuery提供了一個簡單的方法，還是公開某種方法或屬性來使這更容易？

Answer 1

我不認爲jQuery有任何內置這樣做的效用。然而，做你想做的事情所需的數學是相當直接的，所以我建議你去那條路。喜歡的東西：

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

這裏有一個工作示例：http://jsfiddle.net/zY3HH/2/

如果你有一些空閒時間，在你的手中，也許你可以使時間內插邏輯有點更通用的，其打包作爲一個jQuery擴展/插件。

Answer 2

這是你想要的 - 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; 
    } 
});