Jquery text toggle: jQuery Toggle Text? — Stack Overflow

Переключение в Jquery | jQuery toggle()

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

Toggle, в общем, означает переключение между двумя разными опциями. Точно так же переключатель в jQuery относится к методу, который при применении к любому элементу веб-сайта используется для переключения между скрытым и отображаемым свойством для этого элемента. Когда элемент переключения выполняется, он скрывает отображаемый элемент и показывает скрытый элемент.

Синтаксис переключателя в JQuery

Синтаксис использования переключателя в методе jQuery довольно прост. Мы выбираем элемент (заголовок, абзац, кнопку и т. д.), к которому мы хотим применить метод переключения, а затем выполняем для него метод переключения.

Основной синтаксис Toggle в jQuery:

Несколько других распространенных синтаксисов для toggle в jQuery:

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

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

Параметры переключателя в JQuery

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

Параметры:

1. скорость:

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

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

2. Смягчение

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

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

Swing означает, что переключение будет происходить с разной скоростью в разное время. То есть скорость переключения будет увеличиваться в середине.

3. Обратный вызов:

Обратный вызов — это метод, который выполняется после успешного выполнения метода переключения.

4. Отображение:

Описывает, будет ли элемент видимым или скрытым. Если отображение истинно, то элемент будет отображаться, а если отображение ложно, то элемент будет скрыт.

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

Примеры различных методов переключения

1. Простое переключение в JQuery

Теперь давайте посмотрим, как реализовать метод переключения в jQuery на практике.

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

В приведенном выше коде, когда документ будет готов, то есть когда веб-сайт будет полностью загружен, функция будет вызываться при каждом нажатии кнопки. И эта функция выполнит метод toggle для элемента заголовка (h2), что создаст эффект переключения.

2. Добавление задержки

В некоторых случаях нам нужно изменить скорость переключения. jQuery предоставляет нам определенные возможности для этого. Мы можем увеличить или уменьшить скорость переключения в соответствии с нашими требованиями. Давайте посмотрим, как добавить задержку к переключателю с 3 секундами:

В приведенной ниже программе мы применяем метод переключения к заголовку с помощью кнопки. Когда пользователь нажимает на кнопку, будет выполнен метод toggle для заголовка, а также будет учитываться параметр, упомянутый с переключателем (в этой программе этот параметр равен 3000, обозначающий 3000 мс), то есть, если заголовок виден, то он исчезнет через 3000 мс при нажатии кнопки, а если заголовок не виден, то он появится через 3000 мс.

В приведенном выше коде, когда документ будет готов, то есть когда веб-сайт будет полностью загружен, при каждом нажатии кнопки будет вызываться функция. И эта функция вызовет метод toggle для элемента заголовка (h2), но с упомянутым параметром 3000 мс, который произведет эффект переключения через 3000 мс, то есть заголовок скроется через 3000 мс, а затем появится через 3000 мс.

3. Добавление задержки без использования чисел

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

В приведенной ниже программе мы применяем метод переключения к заголовку с помощью кнопки. Когда пользователь нажимает на кнопку, будет выполнен метод toggle для заголовка, а также будет учитываться параметр, упомянутый с переключателем (в этой программе этот параметр является быстрым), то есть, если заголовок виден, то он быстро исчезнет, ​​нажав кнопку, и если заголовок не виден, он быстро появится.

В приведенном выше коде, когда документ будет готов, то есть сайт будет полностью загружен, при каждом нажатии кнопки будет вызываться функция. И эта функция выполнит метод toggle для элемента заголовка (h2), но с параметром, указанным как fast, который очень быстро произведет эффект переключения, то есть заголовок быстро скроется, а затем быстро появится.

4. Использование свойства Easing

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

В приведенной ниже программе мы применяем метод переключения к заголовку с помощью кнопки. Когда пользователь нажимает на кнопку, будет выполнен метод toggle для заголовка, а также будет учитываться параметр, упомянутый с переключателем (в программе этот параметр равен 3000 и линейный), то есть если заголовок виден затем он исчезнет через 3000 мс с постоянной скоростью при нажатии кнопки, а если заголовок не виден, то он появится через 3000 мс с постоянной скоростью.

В приведенном выше коде, когда документ будет готов, то есть сайт будет полностью загружен, при каждом нажатии кнопки будет вызываться функция. И эта функция выполнит метод переключения для элемента заголовка (h2), но с указанным параметром 3000 мс и линейным, который произведет эффект переключения через 3000 мс и с линейной скоростью, то есть заголовок скроется через 3000 мс с линейной скоростью и затем появляются через 3000 мс с линейной скоростью.

5. Использование обратного вызова

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

Функция обратного вызова — это функция, которая выполняется после успешного завершения события, вызывающего функцию обратного вызова.

Возможно, вы запутались, прочитав приведенное выше утверждение.

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

Когда пользователь нажмет на кнопку, будет выполнен метод toggle в заголовке, а также будет учтен параметр, указанный с переключателем (в программе этот параметр равен 3000, обозначающий 3000 мс), то есть, если если заголовок виден, то он исчезнет через 3000 мс при нажатии кнопки, а если заголовок не виден, то он появится через 3000 мс. Теперь после успешного выполнения метода переключения появится предупреждение «Вы успешно внедрили функцию переключения».

В приведенном выше коде, когда документ будет готов, то есть сайт будет полностью загружен, при каждом нажатии кнопки будет вызываться функция. И эта функция вызовет метод toggle для элемента заголовка (h2), но с упомянутым параметром 3000 мс, который произведет эффект переключения через 3000 мс, то есть заголовок скроется через 3000 мс, а затем появится через 3000 мс. Теперь, после успешного выполнения функции переключения, она выполнит функцию обратного вызова, которая покажет предупреждение о том, что «Вы успешно выполнили функцию переключения».

Заключение

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

15 классных тумблеров JQuery

Отобранные вручную бесплатные тумблеры jQuery. Все коллекции включены в демо-версии и исходные коды.

Автор

• Гималаи Сингх
• 3 марта 2019 г.

Ссылка

Скачать

Сделано с

• HTML / CSS / JavaScript

О коде

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

Пол (Мужской / Женский) кнопка переключения для формы ввода данных.

Дополнительная информация: Ссылка

Зависимость: CSS – шрифты Google (семейство: Roboto:900), ionicons. min.css JS – jquery.min.js

Автор

• Тимоти Гиньяр
• 27 июня 2018 г.

Ссылка

Скачать

Сделано с

• HTML / SCSS / JavaScript

О коде

Анимация SVG/CSS – флажок

Развлечение с некоторыми анимациями SVG path

Подробнее: Ссылка

Зависимость: jquery.min.js

Автор

• Валерий Аликин
• 8 июля 2019 г.

Ссылка

Скачать

Сделано с

• HTML / SCSS / JavaScript

О коде

Перетаскиваемый переключатель Skeuomorph — Toggle

Дополнительная информация: ссылка

Зависимость: jquery.min.js, anime.min .js

Автор

• Аарон Икер
• 23 октября 2019 г.

Ссылка

Скачать

Сделано с

• HTML / SCSS / JavaScript

О коде

Elastic Volume Toggle #2

Дополнительная информация: Ссылка

Зависимость: jquery-3. 4.1.min.js, TimelineMax.min.js, TweenMax.min.js

Автор

• AlexSkorkin
• 4 октября 2017 г.

Ссылка

Скачать

Сделано с

• HTML / CSS / JavaScript

О коде

Обзор — DevExtreme jQuery Switch

Дополнительная информация: Ссылка

Зависимость: CSS — dx.spa.cs с, dx.common.css, dx .light.css JS — jquery-3.1.0.min.js, dx.all.js

Автор

• Vimalraj
• 26 мая 2020 г.

Ссылка

Скачать

Сделано с

• HTML / SCSS/JavaScript

О коде

jQuery Fancy Switch

Подробнее: Ссылка

Зависимость: jquery.min.js

Автор

• Тобиас Рождение
• 5 октября 2016 г.

Ссылка

Скачать

Сделано с

• HTML/CSS/JavaScript

О коде

jQuery Switch Class

Дополнительная информация: Ссылка

Зависимость: jquery. min.js

Автор

• Chie Dev
• 13 апреля 2020 г.

Ссылка

Скачать

Сделано with

• HTML / SCSS / JavaScript

О коде

Переключатель

CSS/jQuery стиль элемента переключения и анимация

Дополнительная информация: Ссылка

Зависимость: jquery.min.js

Автор

• Аарон Икер
• 29 августа 2019 г.

Ссылка

Скачать

Сделано с

• HTML / SCSS / JavaScript

О коде

Анимация 3D Switch

Подробнее: Ссылка

Зависимость: Шрифты, JS — jquery-3.4.1.min.js, three.min.js, TweenMax.min.js

Автор

• Симона Бернабе
• 10 июля 2015 г.
901 15

Ссылка

Скачать

Сделано с

• Slim / CSS / JavaScript

О коде

Коллекция Google Switch

Коллекция Switch от Google.

Дополнительная информация: Ссылка

Зависимость: jquery. min.js

Автор

• Юсуф
• 29 апреля 2015 г.

Ссылка

Скачать

Сделано с помощью

• HTML/CSS/JavaScript

О коде

Custom Switch (Pure CSS)

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

Дополнительная информация: Ссылка

Зависимость: jquery.min.js

Автор

• Adonis domingues vieira
• 10 апреля 2016 г.

Ссылка

Скачать

Сделано с

• HTML / CSS / JavaScript

О коде

Переключатель

Уберите галочку для чего Oo Создать новые элементы для навигации… полное будущее

Дополнительная информация: Ссылка

Зависимость: jquery.min.js

Автор 90 109

• Кит Пикеринг 11 января 2015 г. 0128 Тумблер одноэлементный

  Еще один тумблер.

  Дополнительная информация: Ссылка

  Зависимость: jquery.min.js

  Автор

  • Нихил Кришнан
  • 25 марта 2020 г.

  Ссылка 901 09

  Скачать

  Сделано с

  • HTML/SCSS/JavaScript

  о коде

  Кнопка переключения переключения в стиле JQUERY

  Кнопка переключения в стиле iOS с использованием JQUERY и CSS

  Подробнее: Ссылка

  Зависимость: jQuery.min.js

  Автор

  • Алан Кларк
  • 21 апреля 2015 г.

  Ссылка

  Скачать

  Сделано с

  • HTML / Меньше / JavaScript

  Код

  Тумблер Jquery

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

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