Как реализовать анимацию слайдов / отказов jQuery?

Question

По сути, я хотел бы, чтобы DIV выскользнул и сделал небольшой отскок, когда он проходит его окончательный размер, а затем возвращается.Не уверен, как это объяснить, поэтому, пожалуйста, посмотрите мою попытку на диаграмме ниже:

--------------------->  //Slides out
                 <----  //Then "bounces" back to it's final size

У меня есть первая часть, используя анимацию переключения:

$("#second").animate({ width: 'toggle' }, 85);

Я думал, что смогу получитьэффект отскока, выполнив:

$("#second").animate({ width: 'toggle' }, 85).animate({ width: 'toggle' }, 75);

Но он исчезает.После прочтения документации анимации / переключения, я думаю, это имеет смысл, но я все еще не уверен, как получить желаемую функциональность.Есть предложения?

Бонусные баллы, если вы можете сделать так, чтобы содержимое скользящего элемента div было обрезано, а не перенесено на следующую строку.

Answer 1

Самый простой способ, который я знаю, это подключить плагин jQuery Easinh (http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js) и использовать метод easeOutBack.

$("#second").animate({ width: 'toggle' }, 85, "easeOutBack");

Answer 2

Я смог реализовать это следующим образом:

$("#second").animate({ width: 'toggle' }, 250).animate({ width: '-=10' },185);

Похоже, самый прямой путь.

Answer 3

Вам необходимо добавить обработчик complete. http://api.jquery.com/animate/