jQuery эффекты начало

Инструментарий jQuery (библиотеки JavaScript, облегчающей взаимодействие JS и HTML) широк и разнообразен. jQuery используется веб-разработчиками которые хотят расширить функционал своего сайта чуть ли не каждый день. Получение и трансформация данных, навигация без перезагрузки целой страницы, изменение стилей CSS того или иного элемента HTML…
Но всё что делается может быть сделано лучше, красивее или по-крайней мере эффектнее. jQuery предоставляет вебмастеру возможность использовать стандартные эффекты без необходимости писать дополнительные скрипты или плагины.
Разбор начинаем со стандартных:
Скрыть – hide();
Показать – show();
и Переключить – toggle().
Напишем jQuery скрипт который будет скрывать красный блок с белым текстом при нажатии на ссылку «Убрать»:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="windows-1251">
<title>Пример эффекта на jQuery</title>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<!-- Стандартное начало HTML страницы с подключенной библиотекой jQuery -->
</head>
<body>
<a href="#" id="linkHide">Убрать</a>
<div style="color:#fff;background-color:red;width:250px;height:200px;padding:15px;" id="divForHide">Белый текст на красном фоне. Стоит кликнуть ссылку "Убрать" пропадет этот блок пропадет под воздействием hide() jQuery.</div>
<!-- Вначале блок -->
<script>
$("a#linkHide").click(function() {
$("div#divForHide").hide();
return false;
});
</script>
<!-- Ниже сам JS код скрипта -->
</body>
</html>

А здесь Вы можете посмотреть как это работает.

Опубликовано 20.10.2015 в 05:41 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: HTML, jQuery · Теги: , , , , , , , ,