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

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Эффекты и анимация

Эффекты и анимация

Эффекты

Появление элементов на веб-странице и их исчезновение - обычная задача в JavaScript. Выпадающие навигационные меню, всплывающие подсказки и автоматизированные слайд-шоу основаны на способности отображать и скрывать элементы. Библиотека jQuery предлагает несколько функций, с помощью которых осуществляется отображение и сокрытие элементов. С некоторыми из них, такими как show() и hide() отображающим и скрывающим выбранный элемент, мы уже знакомы и использовали в своих примерах.

Функция fadeOut()

Функция fadeOut() - постепенно меняет прозрачность выбранного элемента делая его невидимым. Имеет следующий синтаксис:

$(селектор).fadeOut(скорость,функция_обратного_вызова)
  1. селектор выбирает элемент, который будет скрыт.
  2. скорость указывает скорость изменения прозрачности элемента. Скорость задается в миллисекундах (1000 миллисекунд = 1 секунда) или с помощью одного из предопределенных свойств: fast, slow, normal (быстро, медленно, нормально).
  3. функция_обратного_вызова (необязательный параметр) Функция, которая будет вызвана, когда элемент будет полностью скрыт.
Функция fadeIn

Функция fadeIn с заданной скоростью изменяет прозрачность выбранного элемента постепенно делая его видимым. Имеет следующий синтаксис:

$(селектор).fadeIn(скорость,функция_обратного_вызова)
  1. селектор выбирает элемент, который будет отображен.
  2. скорость указывает скорость изменения прозрачности элемента. Скорость задается в миллисекундах (1000 миллисекунд = 1 секунда) или с помощью одного из предопределенных свойств: fast, slow, normal (быстро, медленно, нормально).
  3. функция_обратного_вызова (необязательный параметр) Функция, которая будет вызвана, когда элемент будет полностью отображен.
Функция fadeTo()

Функция fadeTo() с заданной скоростью изменяет прозрачность элемента до указанного значения. Имеет следующий синтаксис:

$(селектор).fadeTo(скорость,прозрачность,функция_обратного_вызова)
  1. селектор выбирает элемент, прозрачность которого будет изменяться.
  2. скорость указывает скорость изменения прозрачности элемента. Скорость задается в миллисекундах (1000 миллисекунд = 1 секунда) или с помощью одного из предопределенных свойств: fast, slow, normal (быстро, медленно, нормально).
  3. прозрачность указывает значение прозрачности. Должно быть в пределах от 0.0 (полностью прозрачный элемент) до 1.0 (полностью непрозрачный элемент).
  4. функция_обратного_вызова (необязательный параметр) Функция, которая будет вызвана, когда прозрачность элемента будет полностью изменена.

Рассмотрим пример. Создадим документ с двумя изображениями и поэксперементируем с ними.


$(document).ready(function() {
$("#but1").click(function() {
function rast(){
$("#log").text("Мы растворились");
}
$("#pic img").fadeOut(3000, "linear",rast);
$("#pic img").fadeOut(3000,rast);
});
$("#but2").click(function() {
function pro(){
$("#log").text("Мы появились");
}
$("#pic img").fadeIn(3000, pro);

});
$("#but3").click(function() {
$("#pic img").fadeTo(3000, 0.3);
$("#log").empty();
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Методы fadeOut() и fadeTO()</title>
<style>
#log {
clear: left;
margin:5px 5px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#but1").click(function() {
function rast(){
$("#log").text("Мы растворились");
}
$("#pic img").fadeOut(3000, "linear",rast);
$("#pic img").fadeOut(3000,rast);
});
$("#but2").click(function() {
function pro(){
$("#log").text("Мы появились");
}
$("#pic img").fadeIn(3000, pro);

});
$("#but3").click(function() {
$("#pic img").fadeTo(3000, 0.3);
$("#log").empty();
});
});
</script>
</head>

<body>
<input type="button" id="but1" value="fade out">
<input type="button" id="but2" value="fade in">
<input type="button" id="but3" value="fade to">
<div id="log"></div>
<div id="pic">
<img id="pic1" src="../../images/newYear.jpg" width="140" height="97" alt="С Новым годом"/>
<img id="pic2" src="../../images/newyard.png" width="128" height="128" alt="С Новым годом"/>
</div>
</body>
</html>

Функция slideUp()

Функция slideUp() с заданной скоростью изменяет высоту выбранного элемента постепенно делая его невидимым. Имеет следующий синтаксис:

$(селектор).slideUp(скорость,функция_обратного_вызова)
  1. селектор выбирает элемент, который будет скрыт.
  2. скорость указывает скорость скрытия элемента. Скорость задается в миллисекундах (1000 миллисекунд = 1 секунда) или с помощью одного из предопределенных свойств: fast, slow, normal (быстро, медленно, нормально).
  3. функция_обратного_вызова (необязательный параметр) Функция, которая будет вызвана, когда элемент будет полностью скрыт.
Функция slideDown()

Функция slideDown() с заданной скоростью изменяет высоту выбранного элемента постепенно делая его видимым. Имеет следующий синтаксис:

$(селектор).slideDown(скорость,функция_обратного_вызова)
  1. селектор выбирает элемент, который будет отображен.
  2. скорость указывает скорость отображения элемента. Скорость задается в миллисекундах (1000 миллисекунд = 1 секунда) или с помощью одного из предопределенных свойств: fast, slow, normal (быстро, медленно, нормально).
  3. функция_обратного_вызова (необязательный параметр) Функция, которая будет вызвана, когда элемент будет полностью отображен
Функция slideToggle()

Функция slideToggle() применяет к выбранному элементу функцию slideUp() если он отображен и slideDown() если он скрыт.Имеет следующий синтаксис:

$(селектор).slideToggle(скорость,функция_обратного_вызова)
  1. селектор выбирает элемент, который будет скрыт или отображен.
  2. скорость указывает скорость скрытия или отображения элемента. Скорость задается в миллисекундах (1000 миллисекунд = 1 секунда) или с помощью одного из предопределенных свойств: fast, slow, normal (быстро, медленно, нормально).
  3. функция_обратного_вызова (необязательный параметр) Функция, которая будет вызвана, когда элемент будет полностью скрыт или отображен.

Рассмотрим работу этих функций на примере.


$(document).ready(function() {
$("#but1").click(function() {
function rast(){
$("#log").text("Мы скрылись");
}
$("#pic img").slideUp(3000, "linear",rast);

});
$("#but2").click(function() {
function pro(){
$("#log").text("Мы появились");
}
$("#pic img").slideDown(3000, pro);

});
$("#but3").click(function() {
$("#pic img").slideToggle(3000);
$("#log").empty();
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Методы slideUp(), slideDown() и slideToggle()</title>
<style>
#log {
clear: left;
margin:5px 5px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#but1").click(function() {
function rast(){
$("#log").text("Мы скрылись");
}
$("#pic img").slideUp(3000, "linear",rast);

});
$("#but2").click(function() {
function pro(){
$("#log").text("Мы появились");
}
$("#pic img").slideDown(3000, pro);

});
$("#but3").click(function() {
$("#pic img").slideToggle(3000);
$("#log").empty();
});
});
</script>
</head>

<body>
<input type="button" id="but1" value="Скрыть">
<input type="button" id="but2" value="Отобразить">
<input type="button" id="but3" value="Скрыть/Отобразить">
<div id="log"></div>
<div id="pic">
<img src="images/slide.jpg" alt="Чует мое сердце"/>
</body>
</html>