Анимированные эффекты в jQuery - это не те анимации, которые мы знаем, то есть мы не собираемся придавать движению рисунок, важно прояснить это, поскольку это может сбить с толку. Эти анимированные эффекты относятся к способу, которым генерируются переходы элементов в DOM, элемент, способный медленно перемещаться из угла навигатора или исчезать, разбиваясь на тысячи частей.
На первый взгляд может показаться, что они полезны для нас, в конце концов, если мы хотим, чтобы элемент появлялся или исчезал, он может иметь мало значения для нас, как это происходит, однако для тех, кто изучает поведение пользовательских интерфейсов, это очень важно, поскольку он может установить Юмор пользователя или появление как тонкий способ сделать визуальный эффект более привлекательным.
Ясно, кто злоупотребляет и преувеличивает использование анимированных эффектов и перегружает интерфейс, который становится тяжелым или ненадежным, и заставляет пользователя страдать при использовании системы, поэтому вы должны иметь минимум осведомленности и модерации. при применении этого типа эффектов.
Доступные варианты анимации
Важно знать, что различные типы анимаций имеют ряд контролируемых параметров от выполняемого нами вызова, мы можем контролировать их продолжительность, чтобы мы могли откалибровать, влияет ли эффект на удобство использования или нет, и можно ли его детализировать в зависимости от продолжительности и достичь желаемого эффекта, и мы также можем указать функцию или метод, который должен быть выполнен в обратном вызове в конце анимации, например, если мы заставим кнопку исчезнуть в тот момент, когда она больше не будет запускать метод, который затем отправляет пользователю сообщение,
Другой вариант, который у нас есть, - передать карту объекта, в которой мы определяем расширенные или эксклюзивные параметры анимированного эффекта, который мы используем, однако это в основном, когда мы хотим сделать что-то очень конкретное и расширенное. Синтаксис для использования этих опций следующий:
$ (селектор) .effect (длительность); $ (селектор) .effect (duration, functionCallBack); $ (селектор) .effect (functionCallBack); $ (селектор) .effect (mapObjects);
Поскольку мы видим, что каждая строка соответствует каждому из возможных вариантов, которые мы можем применить в стандартных анимациях, возможно, что некоторые анимации имеют определенную характеристику, однако, в которой мы увидим в этом уроке, мы будем работать с этим.
Показать и скрыть
Один из наиболее используемых и наиболее полезных эффектов, которые мы можем придумать, - это показать и скрыть элементы, и оказывается, что это довольно простые для реализации эффекты, поэтому мы собираемся использовать их в качестве примера.
показать () и скрыть ()
Методы, которые позволяют нам достичь этих целей, - это show () и hide (), поскольку мы видим, что их имена на английском языке соответствуют действию, показывают для первого и скрывают для второго, их можно применять к любому элементу в нашей DOM, Так что они довольно практичны и полезны.
Практический пример
Мы сделаем небольшую анимацию, в которой мы будем использовать продолжительность и вызов функции callBack при ее выполнении, мы применим эффекты show () и hide (), и поэтому мы можем узнать, как они используются.
В следующем коде мы видим, как в первую очередь мы включаем библиотеку jQuery из одного из соответствующих CDN, при этом мы избегаем необходимости хранить ее локально и, таким образом, воспользуемся кешем браузеров.
Затем мы определяем два блока
обозначенные element1 и element2 соответственно, где первый скрыт, а второй видим, и, наконец, у нас есть кнопка с надписью start, которую мы применяем в вашем событии click, которое выполняет функцию animate ().
Функция animate () сначала применяет анимацию show () к элементу 1 и дает значение 1000 миллисекунд, равное 1 секунде, и к этому мы добавляем callBack, где применяем эффект hide () к нашему element2 и генерирует сообщение на консоль.
В рамках анимации hide (), которую мы применяем к element2, мы создаем callBack, где мы также будем писать сообщение через консоль. Давайте посмотрим на код нашего первого примера:
анимацииЭто наш начальный скрытый элемент.
Чтобы выполнить анимацию, нажмите на кнопку
Запуск функции animate () {$ ("# element1"). Show (1000, function () {console.log ("show element1"); $ ("# element2"). Hide (1000, function () {console .log ("hide element2");});}); }
Давайте посмотрим, как это выглядит в нашем браузере, на следующем изображении мы увидим HTML перед выполнением какого-либо действия, давайте посмотрим, как element1 не отображается:
Теперь на следующем изображении мы увидим, что происходит после нажатия кнопки «Пуск», мы заметим, что теперь мы видим скрытый элемент, и в консоли у нас будет два сообщения. Если вы сделаете живой пример, вы также увидите, как сначала появляется элемент, а через секунду он исчезает. другой:
Простым способом мы дали жизнь, чтобы показать и скрыть элементы в нашем HTML- документе.
Переключить видимые и скрытые состояния
Есть моменты, когда мы хотим, чтобы кнопка работала как переключатель, показывая и скрывая элемент или группу элементов, хотя это легко сделать, оценивая состояния и используя методы show () и hide (), правда в том, что Мы сгенерировали бы слишком много кода для чего-то такого простого, поэтому команда jQuery подумала об этом и предоставила нам метод toggle ().
Что делает метод toggle ()?
Этот метод оценивает текущее состояние элемента, и с его помощью, если он виден, он скрывает его, а если он скрыт, он показывает его так же, как мы указываем поведение типа переключателя. Лучше всего то, что к этому методу мы можем добавить различные параметры анимации, с продолжительностью и возможностью создания callBack .
$config[ads_text6] not foundРеализуйте метод toggle ()
Давайте теперь создадим пример, где мы применяем на практике то, что мы узнали о методе toggle (), давайте посмотрим код ниже:
анимацииРезультат при выполнении эффекта toggle ().
Запустите функцию animate () {$ ("# element1"). Toggle (1000, function () {console.log ("мы сделали переключение!");}); }
В следующем коде мы увидим, как мы создали div с именем element1, который изначально скрыт, затем у нас есть кнопка запуска, которая при нажатии вызовет функцию animate, к ней будет применен метод toggle (), и в первом случае он будет появляются и отображают сообщение для каждой консоли.
Давайте посмотрим на исходное состояние этого кода браузером, мы заметим, что у нас есть только кнопка и на консоли ничего нет:
Теперь посмотрим, как нажатие на кнопку показывает скрытый элемент и отражает сообщение в консоли:
Наконец, если мы снова нажмем на кнопку, элемент будет скрыт, и сообщение будет повторяться в консоли, что мы заметим, когда увидим число три рядом с ним, которое указывает, сколько раз было инициировано событие.
Другие анимации, чтобы показать и скрыть элементы
Хотя show () и hide () эффективны, на первый взгляд они могут показаться немного простыми, поэтому у нас есть другие методы, которые помогают нам создавать различные анимации, в этом случае мы говорим о затухании и скольжении, которые соответствуют затуханию и скольжения, где первый эффект имеет эффект, как он появляется, а второй скользит от края экрана или контейнера элемента.
Давайте посмотрим в следующем списке его эквиваленты, чтобы показать () и скрыть ():
fadeIn () и slideIn ()$config[ads_text6] not found
Они соответствуют эффектам для показа элементов, то есть эквивалентны show ().
fadeOut и slideOut ()
Они соответствуют эффектам скрытия элементов, то есть эквивалентны hide ().
fadeToggle () и slideToggle ()
Существует третий случай, и он соответствует эффектам типа переключателя и эквивалентен toggle ().
В качестве упражнения мы позволим вам сделать примеры снова, но с помощью этих новых методов, чтобы вы могли воочию убедиться, как они работают.
На этом мы завершим этот урок, мы научились тонко и разумно анимировать наши элементы, важно не злоупотреблять этими эффектами, чтобы разместить очень длинные анимации, так как мы добьемся того, чтобы раздражать пользователя и задерживать его работу, помня, что мы должны поддерживать удобство использования превыше всего.
СТАТЬИ