Пример jQuery Stop Animations

1. 1. Введение
2. 1.1 Почему jQuery?
3. 2. Пример jQuery Stop Animations
4. 2.1 Используемые инструменты
5. 2.2 Структура проекта
6. 2.3 Создание проекта
7. 3. Создание приложений
8. 3.1 Загрузите библиотеку jQuery
9. 3.2 Определите приложение
10. 3.3 Определите функцию jQuery
11. 3.4 Первое приложение jQuery
12. 4. Запустите приложение
13. 5. Демонстрация проекта
14. 6. Заключение
15. 7. Скачать проект Eclipse

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

1. Введение

jQuery - это не что иное, как библиотека JavaScript, которая поставляется с богатыми функциональными возможностями. Он маленький и быстрее, чем многие JavaScript-коды, написанные обычным веб-разработчиком. Используя jQuery, разработчики могут писать меньше кода и делать больше вещей, что упрощает задачи веб-разработчика. Проще говоря, jQuery - это набор из нескольких полезных методов, которые можно использовать для выполнения многих распространенных задач в JavaScript. Несколько строк кода jQuery могут выполнять задачи, для которых требуется слишком много строк JavaScript. Истинная сила jQuery заключается в его CSS-подобном селекторе, который позволяет ему выбирать любой элемент из DOM и изменять, обновлять или манипулировать им. Разработчики могут использовать jQuery для создания классных анимаций, таких как постепенное появление или исчезновение. Они также могут динамически изменять класс CSS компонента, например, делая компонент активным или неактивным. Я использовал эту технику, чтобы сделать вкладки пользовательского интерфейса в HTML. Я могу ручаться за jQuery, что, как только разработчики начнут использовать его, они никогда не вернутся к простому старому JavaScript, поскольку jQuery понятен , лаконичен и мощен .

1.1 Почему jQuery?

• Это помогает улучшить производительность приложений и повысить производительность разработчика
• Помогает в разработке веб-страницы, совместимой с браузером
• Это помогает в реализации критически важной функциональности пользовательского интерфейса без написания нескольких строк кода
• Это быстро и расширяемо, т.е. разработчики могут использовать библиотеку jQuery для реализации настроенного поведения
• Это проще и легче учиться

1.2 Метод jQuery stop ()

Метод jQuery stop () - это встроенная функция, которая останавливает анимацию или эффект до ее завершения. Этот метод работает для всех функций эффекта jQuery, таких как скольжение, затухание и пользовательские анимации. Вот простой синтаксис для использования этого метода.

отрывок

$ (селектор) .stop (stopAll, goToEnd);

Сделать примечание :

• StopAll - это необязательный аргумент, который указывает, следует ли очищать очередь анимации или нет. Значением по умолчанию является false, означающее, что только активная анимация будет остановлена, а анимации очереди будут выполнены позже.
• GoToEnd - это необязательный аргумент, который указывает, следует ли немедленно завершить текущую анимацию. Значение по умолчанию неверно

Эти новые API действительно облегчают жизнь разработчикам! Но для начинающего было бы трудно понять это без примера. Поэтому давайте создадим простое приложение с использованием библиотеки jQuery.

2. Пример jQuery Stop Animations

Вот пошаговое руководство по реализации этого руководства с использованием библиотеки jQuery.

2.1 Используемые инструменты

Мы используем Eclipse Kepler SR2, JDK 8 и Maven. Сказав это, мы проверили код на JDK 1.7, и он работает хорошо.

2.2 Структура проекта

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

Рис. 1: Структура проекта приложения

2.3 Создание проекта

Этот раздел покажет, как создать проект Maven на основе Java с Eclipse. В Eclipse Ide перейдите в Файл -> Создать -> Проект Maven.

Рис. 2. Создание проекта Maven

В окне New Maven Project вам будет предложено выбрать местоположение проекта. По умолчанию будет выбрано «Использовать местоположение рабочей области по умолчанию». Просто нажмите на следующую кнопку, чтобы продолжить.

Рис. 3: Детали проекта

Выберите архетип «Maven Web App» из списка параметров и нажмите «Далее».

Рис. 4: Выбор архетипа

Вам будет предложено «Введите группу и идентификатор артефакта для проекта». Мы введем детали, как показано на рисунке ниже. Номер версии будет по умолчанию: 0.0.1-SNAPSHOT.

Рис. 5: Параметры архетипа

Нажмите «Готово», и создание проекта Maven будет завершено. Если вы видите, он загрузил зависимости maven, и будет создан файл pom.xml. Он будет иметь следующий код:

pom.xml

<project xmlns = "http://maven.apache.org/POM/4.0.0" xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi: schemaLocation = "http: / /maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd "> <modelVersion> 4.0.0 </ modelVersion> <groupId> com.jquery < / groupId> <artifactId> jQueryStopAnimation </ artifactId> <версия> 0.0.1-SNAPSHOT </ version> <packaging> war </ packaging> </ project>

Давайте начнем создавать приложение!

3. Создание приложений

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

3.1 Загрузите библиотеку jQuery

Поскольку это чистый JavaScript-фреймворк, разработчики должны добавить его ссылку, используя тег <script>.

<script type = "text / javascript" src = "resource / js / jquery-3.3.1.min.js"> </ script>

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

3.2 Определите приложение

Далее мы определим пример приложения, используя теги HTML.

<! ------ jQuery stop () Пример анимации ------> <button id = "start" type = "submit" class = "btn btn-success"> Start </ button> <идентификатор id = "пробел"> </ span> <button id = "stop" type = "submit" class = "btn btn-danger"> Стоп </ button> <div> </ div> <div id = "image"> <img id = "myImage" src = "resource / images / mario.jpg" alt = "Mario" height = "125" /> </ div>

3.3 Определите функцию jQuery

На этом шаге мы продемонстрируем метод jQuery stop (). Здесь $ () является синтаксисом по умолчанию для функции jQuery и используется для определения части jQuery. Метод $ (document) .ready вызывается при загрузке документа.

$ (document) .ready (function () {// Запуск анимации $ ('# start'). click (function () {$ ("# myImage"). animate ({left: "+ = 500px"}, 4500 );}); // Остановить анимацию $ ('# stop'). Click (function () {$ ("# myImage"). Stop ();});});

3.4 Первое приложение jQuery

Выполните все вышеперечисленные шаги и сохраните файл. Давайте посмотрим пример кода.

index.jsp

<% @ page language = "java" contentType = "text / html; charset = ISO-8859-1" pageEncoding = "ISO-8859-1"%> <! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN "" http://www.w3.org/TR/html4/loose.dtd "> <html> <head> <title> IndexPage </ title> <meta http-эквивалента =" Content-Type " content = "text / html; charset = ISO-8859-1"> <link rel = "stylesheet" type = "text / css" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css /bootstrap.min.css "> <link rel =" stylesheet "type =" text / css "href =" resource / css / mystyle.css "> <script type =" text / javascript "src =" resource / js / jquery-3.3.1.min.js "> </ script> <script type =" text / javascript "> $ (document) .ready (function () {// Запустить анимацию $ ('# start'). click ( function () {$ ("# myImage"). animate ({left: "+ = 500px"}, 4500);}); // Остановить анимацию $ ('# stop'). click (function () {$ ( "#myImage"). stop ();});}); </ script> </ head> <body> <div class = "container"> <h2 align = "center" class = "text-primary"> jQuery stop () Пример анимации </ h2> <hr /> <div > </ div> <! ------ jQuery stop () Пример анимации ------> <button id = "start" type = "submit" class = "btn btn-success"> Start </ button> <span id = "space"> </ span> <button id = "stop" type = "submit" class = "btn btn-danger"> Стоп </ button> <div> </ div> <div id = "image"> <img id = "myImage" src = "resource / images / mario.jpg" alt = "Mario" height = "125" /> </ div> </ div> </ body> </ html >

4. Запустите приложение

Поскольку мы готовы ко всем изменениям, давайте скомпилируем проект и развернем приложение на сервере Tomcat7. Чтобы развернуть приложение на Tomat7, щелкните проект правой кнопкой мыши и выберите «Запуск от имени» -> «Выполнить на сервере».

Рис. 6: Как развернуть приложение на Tomcat

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

5. Демонстрация проекта

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

HTTP: // локальный: 8082 / jQueryStopAnimation /

Имя сервера (localhost) и порт (8082) могут различаться в зависимости от конфигурации Tomcat.

Рис. 7: индексная страница

Пользователи могут нажать кнопку «Пуск», чтобы запустить анимацию, и кнопку «Стоп», чтобы остановить анимацию, как показано на рис. 8.

Рис. 8: метод jQuery 'stop ()'

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

6. Заключение

В этом разделе разработчики узнали, как создать простое приложение с библиотекой jQuery. Разработчики могут загрузить образец приложения в виде проекта Eclipse в Загрузки раздел.

7. Скачать проект Eclipse

Это был пример метода jQuery stop () для начинающих.

Похожие

Комментарии