Как я могу пропорционально установить продолжительность этой анимации jQuery? - PullRequest
Новая
       15

Как я могу пропорционально установить продолжительность этой анимации jQuery?

7 голосов
/ 03 октября 2011

Я создал быстрый тест, чтобы показать, что я пытаюсь сделать:

http://jsfiddle.net/zY3HH/

Если вы нажмете кнопку «Переключить ширину» один раз, квадрат получитсяодна секунда, чтобы вырасти до полной ширины.Нажмите его еще раз, и потребуется одна секунда, чтобы сузиться до нулевой ширины.

Однако дважды нажмите кнопку «Переключить ширину» в быстрой последовательности - во второй раз, когда квадрат вырос до небольшой долиобщей ширины (например, 10%) - вы заметите, что анимация все еще занимает целую секунду, чтобы вернуть квадрат в нулевую ширину, что выглядит неловко, IMO.

Хотя такое поведение ожидается, я 'Мне бы хотелось, чтобы последняя анимация происходила за промежуток времени, пропорциональный ширине, которую она покрывает.Другими словами, если вы нажмете «Переключить ширину» во второй раз, когда квадрат будет на 10% от его общей ширины, я бы хотел, чтобы ему понадобилось около 1/10 секунды, чтобы вернуться к нулевой ширине.

Должно быть относительно легко (я думаю) сделать значение свойства duration динамическим, вычисляемым при запуске обработчика jQuery click, чтобы измерить текущую ширину квадрата и соответственно определить продолжительность.

Тем не менее, мне не хватает лучшего способа сделать это?Предоставляет ли jQuery простой способ или предоставляет какой-либо метод или свойство, чтобы сделать это проще?

Ответы [ 2 ]

3 голосов
/ 03 октября 2011

Не думаю, что в 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.

1 голос
/ 03 октября 2011

Это то, что вы хотите - 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;
    }
});
...