Обмен кодом кода анимации jQuery

один. Покажи, скрыть

Метод отображения в jQuery: .show (), а скрытый метод: .hide (). Когда нет параметров, его просто сложно отобразить и скрыть контент.

 $ ('. Show'). Click (function () {// Установить события триггера $ ('#box'). show (); // show}); $ ('. Hide'). Click (function () {// установить события триггера $ ('#box'). Hide (); // hide});

В методах .show () и .hide () можно пройти параметр, который контролирует скорость в миллисекундах (1000 миллисекунд равны 1 секунду). Он также богат постоянной скоростью для увеличения и уменьшения, а также изменения прозрачности.

 $ ('. Show'). Click (function () {$ ('#box'). Show (1000); // Потребовалось 1 секунду}); $ ('. Hide'). Click (function () {$ ('#box'). Hide (1000); // потребовалось 1 секунду, чтобы скрыть});

В дополнение к использованию миллисекундов непосредственно до скорости управления, JQuery также предоставляет три строки параметров предварительной скорости: медленные, нормальные и быстрые, соответствующие 600 миллисекундам, 400 миллисекунд и 200 миллисекунд соответственно.

 $ ('#box'). Show ('Slow'); // 600 миллисекунд $ ('#box'). Show ('normal'); // 400 миллисекунд $ ('#box'). Show ('fast'); // 200 миллисекунд

ПРИМЕЧАНИЕ. Передающая ли миллисекунд или прохождение заданных строк, если вы случайно передаете ошибку или передаете пустую строку. Тогда это займет значение по умолчанию: 400 миллисекунд.

Используйте функции обратного вызова .show () и .hide () для достижения эффектов анимации очереди.

(1) Позвоните себе, используя имя функции

 $ ('. Show'). Click (function () {$ ('#box'). Show ('Slow', function showspan () {$ (this) .next (). Show ('slow', showspan);});})

(2) Используйте Arguments.callee для вызова анонимных функций

 $ ('. Show'). Click (function () {$ ('#box'). Show ('slow', function () {$ (this) .next (). Show ('slow', argents.callee);});})

Когда мы используем .show () и .hide (), если нам нужна кнопка для переключения, нам нужно вынести некоторые условные суждения. И jQuery предоставляет нам отдельный метод с аналогичными функциями: .toggle ().

 $ ('. Toggle'). Click (function () {$ (this) .toggle ('Slow');});

два. Слайд и прокрутка jQuery предоставляет набор методов для изменения высоты элементов: .slideup (), .slidedown () и .slidetoggle (). Как следует из названия, сжимается вверх (свитки) и расширяется вниз (слайды).

 $ ('. DOWN'). Click (function () {// Пыпать вниз $ ('#box'). Slidkown ();}); $ ('. up'). Click (function () {// Перевечивать $ ('#box'). slideup ();});

Примечание. Эффекты скольжения и прокрутки такие же, как дисплей и скрытые эффекты, и имеют одинаковые параметры.

три. Исчезать, исчезать

jQuery предоставляет набор методов, специально предназначенных для изменений прозрачности: .fadein () и .fadeout (), которые представляют собой исчезновение и исчезают соответственно, и, конечно, есть также метод автоматического переключения: .fadetoggle ().

 $ ('. in'). Click (function () {// подделка в $ ('#box'). fadein ('slow');}); $ ('. out'). Click (function () {// Fake Out $ ('#Box'). Fadeout ('slow');}); $ ('. });

Вышеуказанные три метода прозрачности могут быть только от 0 до 100 или от 100 до 0. Если мы хотим установить указанное значение, то нет никакого пути. jQuery предоставляет метод .fadeto () для решения этой проблемы.

 $ ('. Toggle'). Click (function () {$ ('#box'). fadeto ('Slow', 0.33); //0.33 означает, что значение составляет 33%});

PS: количество значений составляет от 0 до 1, что соответствует проценту

Четыре Пользовательская анимация

JQuery предоставляет несколько простых и обычно используемых аспектов фиксированных анимации, которые мы используем. Но иногда эти простые анимации не могут удовлетворить наши более сложные потребности. В настоящее время jQuery предоставляет метод .Animate () для создания наших пользовательских анимаций для удовлетворения более сложных и изменяемых требований.

 $ ('. animate'). Click (function () {$ ('#box'). Animate ({'width': '300px', 'fontsize': '50px', 'opacity': 0.5});});

Примечание: изменение CSS является анимационным эффектом. В приведенном выше примере уже существует четыре изменения CSS, и был достигнут эффект синхронного движения множественных анимаций.

Существует только один параметр, который должен быть передан, который представляет собой объект со стилем CSS пары ключей. Есть два дополнительных параметра, а именно функции скорости и обратного вызова.

 $ ('. animate'). Click (function () {$ ('#box'). Animate ({'ширина': '500px', 'height': '400px',}, 2000, function () {alert ('выполнение завершено');});});

До сих пор мы создали анимации с фиксированными позициями, которые все еще. Если вы хотите реализовать изображения битовых движений в состояниях движения, вы должны использовать пользовательские анимации и объединить их с абсолютной функцией позиционирования CSS.

 $ ('. animate'). Click (function () {$ ('#box'). Animate ({'top': '300px', // абсолютное позиционирование CSS должно быть установлено сначала «левое»: '200px'});});

PS: ссылочный объект должен быть установлен сначала в CSS, а абсолютное позиционирование

В пользовательской анимации каждое начало движения должно быть в начальном положении или в начальном состоянии, и иногда мы хотим анимировать его через текущую позицию или состояние. JQuery предоставляет функции добавления и уменьшения пользовательской анимации.

 $ ('. animate'). Click (function () {$ ('#box'). animate ({left: '+= 100px', width: '+= 100px', высота: '+= 100px'});});

пять. Метод анимации очереди

Мы уже можем реализовать анимацию очереди раньше. Если это тот же элемент, его можно вызвать в последовательности или объединении. Если это другой элемент, вы можете использовать функцию обратного вызова. Но иногда слишком много анимаций в очереди, и читаемость функции обратного вызова значительно снижается. С этой целью jQuery предоставляет набор методов, специально используемых для анимации в очереди.

// подключен не может быть реализован в очереди последовательности
$ ('#box'). SlideUp ('Mlow'). Slidelown ('Slow'). CSS ('фон', 'Orange');

ПРИМЕЧАНИЕ. Если метод анимации анимирован, лигатура может быть в очереди в последовательности, в то время как метод .css () не является методом анимации и будет до того, как очередь будет первой. Затем для решения проблемы можно использовать функцию обратного вызова анимации.

 // Использование функции обратного вызова, чтобы заставить очередь .css () метод .sliddown () после $ ('#box'). Slideup ('slow'). Slidelown ('Slow', function ({$ (this) .css ('founal', 'Orange');});

Но если это так, когда есть много анимации в очереди, читаемость не только уменьшится, но и исходный метод анимации недостаточно ясен. Итак, наша идея заключается в том, что каждая операция является его собственным независимым методом. Затем jQuery предоставляет метод, аналогичный функции обратного вызова: .Queue ().

 // Использование метода .QUEUE () для моделирования метода анимации после следования методу анимации $ ('#box'). SlideUp ('Slow'). SlideDown ('Mlow'). Queue (function () {$ (this) .css ('founal', 'Orange');});

Теперь мы хотим продолжать добавлять скрытую анимацию в метод .Queue (), но мы обнаружили, что ее невозможно реализовать. Это вызвано функцией .queue (). Решение: функция обратного вызова jQuery's .Queue () может передавать параметр, который является следующей функцией. Вызовите это следующим () методом в конце, чтобы выполнить анимацию в очереди.

 // Использование следующего параметра для реализации непрерывной анимации очереди вызовов $ ('#box'). SlideUp ('Mlow'). Slidelown ('Mlow'). Queue (function (Next {$ (this) .css ('founal', 'Orange'); next ();}). Hide ('Slow');

PS: .Queue () Метод также имеет другую функцию, которая заключается в том, чтобы получить длину текущей очереди анимации (не продемонстрировано подробно)

jQuery также предоставляет функциональный метод очистки очередей: .clearqueue (). Поместите его в функцию обратного вызова в очереди или метод .Queue (), а оставшиеся очереди, выполненные, могут быть удалены.

 // Очистить очередь анимации $ ('#box'). Sliddown ('slow', function () {$ (this) .clearqueue ()});

шесть. Связанные с анимацией методы

Много раз необходимо прекратить запуск анимации, а JQuery предоставляет метод .stop () для этого. У него есть два дополнительных параметра: .stop (clearqueue, gotoend); Clearqueue проходит логическое значение, которое представляет, следует ли очистить неожиданную очередь анимации, а Gotoend представляет, следует ли напрямую прыгать в исполняющую анимацию до последнего состояния.

 $ ('. animate'). Click (function () {$ ('#box'). Animate ({'left': '300px'}, 1000); $ ('#box'). Animate ({'top': '300px'}, 1000); $ ('#box'). Animate ({'height': '300px'}, 1000); $ ('. Stop'). Click (function () {$ ('#box'). Stop (true, false);});

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

Иногда при выполнении анимации или анимации в очереди существует задержка перед движением, и jQuery предоставляет метод .delay () для этого. Этот метод может установить задержку перед анимацией или добавить его в середину анимации в очереди.

 // стартовая задержка составляет 1 секунду, средняя задержка составляет 1 секунду. $ ('. Animate'). Click (function () {$ ('#box'). Delly (1000) .Animate ({'left': '300px'}, 1000); $ ('#box'). Animate ({'снизу': '300px'}, 1000); 'ширина': '300px'}, 1000);

Arguments.callee выполняется, в какой функции она представляет какую функцию. Обычно используется в анонимных функциях. В анонимных функциях вам иногда нужно назвать себя, но поскольку это анонимная функция, она не имеет имени и регулируется. В настоящее время Arguments.callee можно использовать вместо анонимных функций

 // рекурсивно выполнять себя, Infinite Loop Execute $ ('#Box'). Slidetoggle ('slow', function () {$ (this) .slidetoggle ('slow', arguments.callee);});

Собственность $ .fx.off может отключить все эффекты анимации.

$ .fx.off = true; // по умолчанию ложно

Все поняты.

Выше приведено обмен кодом кода анимации jQuery, введенный вам редактором. Я надеюсь, что это будет полезно для вас.