Toggle jquery animate: jQuery toggle animation — Stack Overflow

020 Создание кнопки-переключателя с помощью jQuery — просмотр исходного видеоруководства

Из курса: Посмотреть исходный код

020 Создание переключателя с помощью jQuery

“

— [Голос за кадром] Привет, это Рэй Вильялобос, добро пожаловать в View Source. В этом эпизоде ​​мы рассмотрим, как создать кнопку-переключатель с помощью jQuery. Итак, если у вас есть несколько минут для быстрого совета по jQuery, пришло время просмотреть исходный код. Итак, давайте взглянем на нашу страницу и посмотрим, как мы собираемся этого добиться. Во-первых, у меня есть простая HTML-страница с абзацем в самом верху и переключаемой областью в самом низу.

Эта область переключения имеет вот этот фрагмент кода, который выглядит как вот эта кнопка-переключатель внизу. Это поле будет тем, что мы будем анимировать вверх и вниз всякий раз, когда мы нажимаем на эту кнопку. Мы связали этот файл с файлом CSS, и если мы посмотрим на этот файл CSS, мы увидим, что мы только что немного настроили это тело. У этого тела деревянный фон, вот здесь. И для разных браузеров, использующих разные браузерные префиксы, у нас есть радиальный градиент, который находится прямо поверх этого деревянного фона. Вы можете видеть, что мы вызываем деревянный фон прямо здесь, для каждого типа браузера. И здесь у нас есть этот градиент. Если мы увеличим непрозрачность градиента, вы увидите, что он проявляется намного сильнее. Итак, это просто небольшой градиент с небольшим количеством непрозрачности, чтобы показать едва заметное свечение. Теперь остальная часть кода позиционирует наш переключатель внизу. Итак, вы можете видеть здесь, что положение этого вот здесь зафиксировано в нижней части экрана, и у него есть небольшой запас для передышки. Сам блок имеет относительное позиционирование, так что он относительно своего предыдущего контейнера, который будет всем этим блоком, который является здесь положением переключателя. Итак, мы центрируем это, и мы просто даем ему немного передышки везде, а также добавляем немного текстур. На самом деле мы ничего этого не видим, потому что окно, которое появляется при переключении, не будет видно, пока мы не исправим jQuery. Итак, у нас также есть несколько стилей для элементов внутри блока, а именно эти два тега уровня заголовка и абзац. Наконец, у нас есть этот стиль поп-текста, это стиль настоящего текста прямо здесь. И это позволит получить фоновое изображение со стрелками. Прямо сейчас эта стрелка указывает вверх, потому что она находится в верхней части изображения. Но обратите внимание, что всякий раз, когда мы активируем всплывающее окно, фон этого элемента будет меняться на версию стрелки, которая была перемещена вверх на 18 пикселей. Это называется спрайтом, и мы можем использовать одно изображение и просто переместить его вверх на определенное количество пикселей, чтобы поместить его в другое положение. Взгляните на стрелки в этом PNG-файле. Вы можете видеть, что есть изображение, которое мы используем для обоих этих состояний, и прямо сейчас по умолчанию оно показывает только верхнюю половину. Всякий раз, когда мы нажимаем на этот элемент, он будет показывать нижнюю часть. Итак, вернемся к нашему стартовому файлу, и вы увидите, что мы добавили пару веб-шрифтов, один из которых называется «Arvo», а другой — «Amaranth». Вы можете найти веб-шрифты, перейдя на google.com/webfonts и нажав «Начать использование шрифтов». Вы можете либо выполнить поиск шрифта, который вы ищете. Чтобы использовать только этот шрифт, вы можете нажать «Быстрое использование» и скопировать код, который он вам дает, прямо здесь. Если вы хотите использовать более одного шрифта, добавьте этот шрифт в коллекцию. И вернитесь на главную страницу, выберите другие шрифты и избавьтесь от этого элемента поиска прямо здесь, чтобы мы могли видеть больше шрифтов, и добавьте любой другой шрифт, который вы хотите, а затем перейдите на вкладку «Использовать» здесь, в самом низу. . Видите, все шрифты, которые мы выбрали, тут как тут. И мы можем добавить этот фрагмент кода в наш HTML. Мы уже сделали это в нашем проекте и добавили сюда семейства «Арво» и «Амарант». И затем у нас есть остальная часть нашего кода. Итак, теперь нам нужно запрограммировать jQuery, чтобы этот переключатель активировался правильно. Теперь, чтобы сделать это, я перейду к фрагментам кода и сначала возьму ссылку на CDN jQuery из Google, поэтому CDN — это сеть доставки контента, которая загружает последнюю версию скриптов jQuery из Google. . Это всегда хорошая идея, если вы делаете это, чтобы также предоставить локальную копию вашего скрипта, что я и делаю прямо здесь, и вы можете видеть, что jquery.min.js также находится прямо здесь, в той же папке. Добавив это, мы можем убедиться, что если мы тестируем наш скрипт в автономном режиме, вы все равно сможете увидеть интерактивность. Поэтому, если по какой-то причине он не может подключиться к сети Google, потому что вы не в сети, вы все равно можете прочитать локальную копию. Итак, я возьму это, вернусь в свой начальный файл и в секцию head нашего документа вставлю этот фрагмент кода. Прямо сейчас мы ничего не заставили работать, все, что мы делаем, это просто связываемся с правильным файлом Javascript. Итак, теперь я собираюсь вернуться к фрагментам кода и взять второй фрагмент кода, и этот фрагмент кода фактически активирует нашу функцию извлечения текста. Итак, позвольте мне скопировать это и поместить в наш стартовый файл. Поместите это прямо здесь после сценария. И нажмите на это, и вы увидите, что теперь весь этот блок текста, который мы скрыли в начале, исчезает. Итак, то, что мы здесь делаем, это прежде всего создание функции готовности документа. Это означает, что этот фрагмент кода будет выполняться только после загрузки всего документа. Таким образом, рекомендуется поместить все ваши функции в этот тег, чтобы убедиться, что функции выполняются только после загрузки страниц. Теперь, следующее, что мы делаем, это добавляем обработчик, чтобы, когда кто-то нажимал на этот элемент под названием #poptext, который находится прямо здесь, программа собиралась сделать пару вещей. Первое, что он сделает, это активирует этот метод переключения класса, который будет включать и выключать класс. Итак, я уберу это, чтобы вы могли видеть, что здесь происходит. Другое, что происходит здесь, это то, что если мы нажмем на этот элемент, он будет включаться и выключаться, этот дополнительный класс подсветки. И если вы помните, класс выделения просто меняет фоновое изображение, а также меняет цвет фона прямо здесь. Итак, что мы делаем, так это делаем этот фон желтым и добавляем изображение стрелки, смещенное на 18 пикселей, чтобы сдвинуть его вверх, это то же самое изображение, что и раньше, но мы показываем другую часть это. Итак, все, что нужно делать, это включать и выключать его, и это самый простой способ выполнения переключения jQuery, но всякий раз, когда вы хотите показать или скрыть другой элемент, вам, возможно, придется сделать это немного по-другому. Итак, я собираюсь добавить этот код обратно. Как видите, я переключаю анимацию самого блока, выполняя функцию анимации в этом элементе блока.

Таким образом, этот элемент блока является идентификатором, который показывает все стили, происходящие внутри нашего блока. Итак, когда я что-то анимирую, я могу включать и выключать различные свойства анимации. Итак, если я уберу некоторые из них, я уберу ширину и эту последнюю запятую, и теперь я нажму, вы увидите, что анимируется не ширина, а высота и непрозрачность этого переключателя. оживляют. Таким образом, мы можем контролировать различные вещи, которые мы хотим включать и выключать. Мы добавим туда ширину, вы можете видеть, что теперь фактическая форма и ширина поля увеличиваются, когда я нажимаю на этот элемент. И другой элемент управления, который у нас есть, — это как долго мы хотим, чтобы эта анимация длилась? Это миллисекунды, поэтому, если я установлю его на 200, это произойдет намного быстрее. Так что иногда вы можете просто переключить объект, если вы на самом деле не хотите анимировать какие-либо его функции, используя класс toggle. Если вы хотите анимировать некоторые элементы элемента, вы можете просто использовать метод animate прямо здесь. И вы можете управлять отдельными элементами, набрав переключатель для каждого из элементов, которые вы хотите переключить. Итак, не забудьте проверить некоторые из отличных курсов, которые есть в библиотеке Lynda.com по jQuery и анимации jQuery. Вы также можете посмотреть здесь другие выпуски View Source и помните, что когда вам нужно стильно анимировать свое тело, самое время использовать View Source.

Содержание

20 лучших тумблеров [примеры на чистом CSS]

Если вы занимаетесь веб-разработкой, то наверняка знаете, что такое «тумблер». В настоящее время почти нет веб-сайтов или веб-приложений, которые их не используют.

Что такое тумблер CSS?

Это элемент дизайна, который предоставляет пользователям возможность выбирать между двумя различными состояниями. Обычно используется на веб-сайтах, в мобильных приложениях и другом программном обеспечении.

При использовании в веб-разработке тумблер не является нативным элементом, поэтому разработчики придумали способы имитации этого элемента, используя только HTML и CSS.

Обычно под капотом используется скрытый флажок для отслеживания состояния тумблера.

Ваш браузер не поддерживает видео тег.

20 лучших тумблеров CSS

Вот список лучших примеров тумблеров CSS, которые мы нашли. Все они на чистом CSS и без единой строчки JavaScript:

1. Тумблер темного режима

См. перо на КодПене.

Все мы любим темный режим. И если вы планируете реализовать это на своем сайте, вы, вероятно, будете использовать какой-то тумблер от Saba.

Этот переключатель был разработан специально для этой цели, и результат просто прекрасен.

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

Это чисто CSS-переключатель, так что не стоит беспокоиться о JavaScript! Чистая красота!

2.

Переключатель CSS с текстом

См. перо на КодПене.

Если вам нужен переключатель, содержащий короткий текст, например «Да» или «Нет», тогда вам понравится этот переключатель от Himalaya.

Этот пример переключателя имеет 18 различных эффектов. И самое приятное, что каждый лучше предыдущего!

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

Все анимации сделаны на чистом CSS и очень плавные!

3. Тумблер Pure CSS

См. перо на КодПене.

Созданный Маркусом, это базовый и, вероятно, идеальный тумблер для тех, кто ищет тумблер только для CSS.

Что мне лично нравится в этом, так это то, что у него есть дополнительная анимация, которая происходит, когда мы нажимаем на переключатель, прежде чем мы отпускаем кнопку.

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

4. Кнопка переключения CSS

См. перо на КодПене.

Некоторые люди могут искать настоящие кнопки с переключаемым состоянием. Термин «кнопка-переключатель» может немного сбивать с толку, но если вы ищете настоящие кнопки с двумя состояниями, этот пример для вас.

Этот переключатель был создан Маурисио и содержит 5 различных переключателей, два из которых считаются кнопками.

перекосил и перевернул 9Эффекты 0084 могут быть тем, что вы ищете!

5. Тумблер iOS

CSS

См. перо на КодПене.

Вполне вероятно, что iOS с их iPhone сделали переключатель модным в веб-разработке, поэтому неудивительно, что многие люди любят имитировать такой же внешний вид для своего веб-сайта.

Вот хороший пример тумблера от coldsoul, который имитирует тот же эффект и делает это с тем же дизайном и функциональностью.

И, конечно же, он также поддерживает сенсорные устройства.

6. Табличка для тумблера

См. перо на КодПене.

Обычно каждый вход имеет связанный с ним элемент метки для предоставления описания. При использовании тумблера вы можете сделать то же самое.

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

Обратите внимание, как переключатель меняет свое состояние при нажатии на метку. Это ожидаемое поведение меток при правильной реализации.

Спасибо Моргану за создание этого прекрасного переключателя.

7. Тумблер с вращающейся этикеткой

См. перо на КодПене.

Если вы хотите поэкспериментировать с метками переключателей, вот отличный пример того, как можно довести их до крайности.

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

Идеально подходит для использования в качестве большого элемента полноэкранного веб-сайта. Особенно, если вы хотите также использовать эффект скользящего фона, который идет вместе с ним.

8. Доступный тумблер с чеком

См. перо на КодПене.

Доступность должна быть приоритетом в Интернете в настоящее время. Этот переключатель от руки Гомера доказывает нам, что красота и дизайн могут быть рука об руку.

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

Кроме того, обратите внимание на то, как на элемент можно сфокусироваться, когда вы нажимаете клавишу вкладки , что является ожидаемым поведением для большинства элементов ввода.

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

10. Тумблер Bootstrap 5 CSS

См. перо на КодПене.

Если вы используете Bootstrap, вы можете проверить этот пример codepen, созданный Nisharg.

Он использует Bootstrap 5 и демонстрирует различные размеры тумблеров с использованием исключительно HTML и CSS поверх CSS-файла Bootstrap.

11. Эластичный тумблер CSS

См. перо на КодПене.

Этот пример от Sivacva добавляет немного оригинальности традиционному переключателю, добавляя два дополнительных эффекта. Свечение или тень, появляющаяся при включении переключателя, и какая-то эластичный эффект.

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

12. Тумблер «Солнце-Луна»

См. перо на КодПене.

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

Он использует фигуры солнца и луны для представления обоих состояний, темного и светлого режимов.

Желтое солнце представлено на синем фоне в виде неба, а белая луна — на черном небе и звезде.

Лично мне нравится анимация, происходящая на этом тумблере. Солнце становится звездой, а луна появляется из самого низа.

Если вы, как и я, увлекаетесь анимацией, вам также понравится эта коллекция потрясающих текстовых анимаций CSS.

14. Переключатель темного режима с текстом

См. перо на КодПене.

Иногда вам может понадобиться добавить полное слово внутри тумблера вместо использования для него внешней метки.

Если это так, то этот пример переключателя от Nadeesha наверняка доставит вам удовольствие 🙂

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

Вы заметите, как вся страница становится черной или белой в зависимости от ее состояния.

15. Тумблер «День/Ночь»

См. перо на КодПене.

Если вы хотите использовать необычные эффекты, вы не можете пропустить этот тумблер от Raunaq.

Этот переключатель «день-ночь» — настоящее произведение искусства. Там так много деталей. Сделанный с большим дизайнерским вкусом, этот переключатель показывает красивое солнце с движущимися облаками и луну с падающими звездами.

Почти невероятно, что это делается с помощью чистого CSS!

16. Огромный тумблер

См. перо на КодПене.

Вот еще один пример переключения дня и ночи, доведенный Lurx до крайности.

Идеально подходит для использования в большом размере для веб-сайтов, не связанных с весельем или непринужденной атмосферой, которые хотят привлечь внимание посетителей и создать для них уникальные впечатления.

Сделано только с помощью CSS.

17. Поворотный тумблер

См. перо на КодПене.

Вот красиво оформленный тумблер на чистом CSS, закодированный Клаудией, с какой-то скользящей анимацией.

В нем используется фигурка робота из «Звездных войн» RD-D2, чтобы добавить немного веселья.

18. Цветной тумблер – закругленный и прямоугольный

См. перо на КодПене.

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

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

Лично мне нравится круглый тумблер, но могут быть случаи, когда может пригодиться и квадратный.

19. Тумблер CSS с тремя состояниями

См. перо на КодПене.

Кто сказал, что тумблер может иметь только две метки или два состояния?

На этом примере Рикардо показывает нам, что тумблер может содержать три состояния, а почему бы и нет, даже три метки, если вы поместите их поверх каждого состояния.

И все это было сделано вообще без JavaScript. Впечатляет?

20. Переключение темного режима на чистом CSS

См. перо на КодПене.

Отличный пример переключателя, предложенный Бенджамином, который приводит к довольно красивому элементу переключателя, используя только CSS.