Jquery animate show: .show() | jQuery API Documentation

Leave a Comment / Разное / By /

jQuery показать (дополнительно) | Кевин Чисхолм

Метод jQuery show может принимать объект в качестве аргумента. В этом аргументе вы определяете одно или несколько свойств, которые предоставляют jQuery более подробную информацию о том, как должны отображаться совпадающие элементы. анимировать

методов. В конце концов, все они используют анимацию jQuery. При использовании метода show, если вы не передаете никаких аргументов, соответствующие элементы сразу же отображаются. Но если вы хотите постепенно отображать элементы, вы можете предоставить объект, который дает детали конфигурации.

Попробуйте сами!

В приведенном выше примере нажмите кнопку с надписью: «Показать абзац». Вы заметите, что абзац появляется медленно. Теперь щелкните вкладку HTML . Атрибут стиля элемента абзаца имеет значение:  «отображение: нет»; . Это причина того, что абзац не виден при загрузке страницы. Теперь щелкните вкладку JavaScript .

Для элемента существует обработчик клика: button#show. При нажатии этой кнопки jQuery метод show вызывается для каждого элемента абзаца на странице (в данном случае он только один).

Обратите внимание, что объект передается методу jQuery show . Этот объект предоставляет подробную информацию о том, как мы хотим, чтобы элемент абзаца отображался. Для свойства продолжительность установлено значение: 2000 . Это означает, что показ абзаца должен длиться 2000 миллисекунд, или двух секунд. Свойство complete является функцией. Эта функция обратного вызова будет выполнена после завершения анимации. Внутри этой функции мы меняем текст кнопки на «Анимация завершена!» . Также добавляем класс «готово» . Если вы снова нажмете на вкладку HTML , вы увидите встроенную таблицу стилей (элемент стиля

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

Скидка 10%! — Используйте код KEVIN10

Подписаться на этот блог

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

Оставьте это пустым:Оставьте это поле тоже пустым:Не меняйте это:

Ваш адрес электронной почты:

 

Искать в этом блоге
Ищи:
Категории

АЯКС Веб-сервисы Amazon (AWS) Угловой Угловой 2 Угловые сервисы Массив.прототип Массивы Асинхронный Определение асинхронного модуля Магистраль Комбинаторы CSS CSS3 Экспресс JS Функции Gulp.js HTML5 Интернет Жасмин Ява JavaScript JavaScript-шаблоны Инструменты JavaScript Весенняя загрузка Java jQuery JSON Меньше CSS Мапбокс Мобильный MongoDB Node. js Шаблоны Node.js НПМ Объектно-ориентированный JavaScript Должность Реагировать Реагировать на родной Строка.прототип Видео Веб-разработка Веб-производительность Веб-скрейпинг

Теги

ajax угловатый угловой.js множество асинхронный хребет backbone.js перезвонить Каскадные таблицы стилей учебный класс контекст css директива мероприятие выражать функция функции как HTML HTML5 http JavaScript jquery json урок литералы карта модуль узел узел.js нпм объект объектно-ориентированный объекты упс Прототип требовать маршрут сфера сервер одностраничное приложение спа это руководство просмотр

Контактное лицо

Электронная почта : [email protected]

Телефон: : + 1 (212) 465-3196