Изучаем Java

Вы здесь: Главная >> Jquery-учебник >> Эффекты и анимация в jQuery

Обучающие курсы:

Программирование на Java + трудоустройство
Обучение на программиста Android + стажировка

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


Ну а теперь мы приступаем к тому разделу, за который, в общем-то многие и полюбили jQuery – к изучению эффектов и анимации в jQuery.

Управление отображением элемента в jQuery

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

Для управления отображением элементов предназначены следующие методы.

show( [Продолжительность [, Функция обратного вызова] ] ) — отображает элемент.

hide([Продолжительность[, Функция обратного вызова]]) — скрывает элемент.

toggle([Продолжительность[, Функция обратного вызова]]) — позволяет чередовать сокрытие и отображение элементов. Если элемент скрыт, то он будет отображен, и наоборот.

$ ("ibutton") .click(function()   {
$ ("р:first") .toggle() ;
});
>Абзац</р>
<input type="button" value="Скрыть или отобразить абзац">

После первого щелчка на кнопке абзац будет скрыт. Если щелкнуть второй раз, то абзац будет отображен.

toggle (Условие) — если в качестве параметра указано значение true, то элемент будет отображен (с помощью метода show ()), а если указано значение false, то он будет скрыт (с помощью метода hide ()).

slideDown([Продолжительность[, Функция обратного вызова]]) — показывает элемент, спуская его сверху.

slideUp([Продолжительность[,Функция обратного вызова]]) — скрывает элемент, поднимая его снизу вверх.

slideToggle ( [Продолжительность [, Функция обратного вызова] ] ) — позволяет чередовать сокрытие и отображение элементов. Если элемент скрыт, то он будет отображен (спущен сверху), и наоборот (поднят снизу вверх).

$("#btnl").click(function()   {
  $("div").slideDown(lOOO);
});
$("#btn2").click(function()   {
$("div").slideUp(lOOO);
});
$("#btn3").click(function()   {
  $("div").slideToggle(1000);
});
<div style="background-color : green ,-height :15Opx;display:none;">
Скрытый элемент</М^>
<input type="button" value="Отобразить элемент" id="btnl">
<input type="button" value="Скрыть элемент" id="btn2">
<input type="button" value="Отобразить или скрыть элемент" id="btn3">

В необязательном параметре Продолжительность может быть указано время выполнения анимации в миллисекундах или следующие значения:
fast — 200 миллисекунд;
normal — 400 миллисекунд;
slow — 600 миллисекунд.

Отобразим все абзацы.

$("р").show();

Скроем все абзацы.

$("р").hide("slow");
$("р").hide(600);

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

function Название функции () {
// ...
}

Внутри функции обратного вызова доступен указатель (this) на текущий DOM-элемент. При щелчке на ссылке вначале скроем ее, а затем по окончании анимации отобразим.

$("a").click(function() {
$ (this) .hide (600, functionO {
$(this).show("normal");
});
return false; // Прерываем переход по ссылке
});

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

Листинг 7.1. Сокрытие и отображение элементов

<html>
<head>
<title>Сокрытие и отображение элементов</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("a.menu").click(function() {
      // Находим элемент, расположенный сразу после ссылки
var elem = $(this).nextAll("div.elem:first");
      if (elem.is(":hidden")) { // Если элемент скрыт
         // Скрываем видимые элементы
         $("div.elem:visible").hide();
         // Отображаем элемент, расположенный сразу после
ссылки
         elem.show();
      }
      else { // Если элемент был отображен ранее
         elem.hide(); // Скрываем элемент
      }
      return false; // Прерываем переход по ссылке
});
});
//-->
</script>
<style>
.menu { color:black; }
.elem { display:none; }
</style>
</head>
<body>
<a href="#" class="menu">Отобразить или скрыть элемент
1</a><br>
<div class="elem">Скрытый элемент 1</div>
<a href="#" class="menu">Отобразить или скрыть элемент
2</a><br>
<div class="elem">Скрытый элемент 2</div>
<a href="#" class="menu">Отобразить или скрыть элемент
3</a><br>
<div class="elem">Скрытый элемент 3</div>
<a href="#" class="menu">Отобразить или скрыть элемент
4</a><br>
<div class="elem">Скрытый элемент 4</div>
</body>
</html>

Изначально все теги div, имеющие класс elem, скрыты. При щелчке на ссылке, имеющей класс menu, находим тег div, который следует сразу после ссылки. Далее с помощью метода is () проверяем, является ли элемент скрытым. Если да, то скрываем все видимые теги div, а затем отображаем элемент, а если нет, то просто скрываем его. И наконец, прерываем переход по ссылке, возвращая значение false.

 

Изменение прозрачности элемента в jQuery

Для изменения прозрачности элементов предназначены следующие методы.

fadeln([Продолжительность[, Функция обратного вызова]\)— показывает элемент, изменяя его прозрачность.

fadeOut([Продолжительность [, Функция обратного вызова]])— скрывает элемент, изменяя его прозрачность.

fadeTo(Продолжительность, Прозрачность[, Функция обратного вызова] ) — позволяет изменить степень прозрачности элемента. Во втором параметре может быть указано вещественное число от 0 до 1 включительно.

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

$("#imgl").css("opacity",  0.4).hover(
  function()   {
$ (this) .stop() .fadeTo(600,  1) ;
}
function()   {
$ (this) .stop() .fadeTo(600,  0.4) ;
}
) ;
<img src="img.gif" id="imgl">

Обратите внимание на метод stop (). С его помощью мы досрочно прерываем анимацию. Это позволяет избежать неприятных эффектов при слишком быстром перемещении курсора.

В параметре Продолжительность указывается время выполнения анимации в миллисекундах или следующие значения:

fast — 200 миллисекунд;
normal — 400 миллисекунд;
slow — 600 миллисекунд.

Рассмотрим пример.

$("#btnl").click(function()   {
$("div").fadeln(4000);
});
$("#btn2").click(function()   {
  $("div").fadeOut(4000);
});
<div style="width:5OOpx;height:15Opx;background-color:green;
display:none;">
TeKCT</div>
<input type="button" value="Отобразить" id="btnl">
<input type="button" value="Скрыть" id="btn2">

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

function Название функции() {
// ...
}

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

$("div").mouseover(function()   {
$ (this) . fadeOut (200,  function(){
  $(this).fadeln(600);
});
<div style="width:ЮОрх;height:10Opx;background-color:black;"> </div><br>
<div style="width:10Opx;height:10Opx;background-color:black;"></div>

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

$("div").mouseover(function() {
$(this).fadeOut(200).fadeln(600);
});

 

Создание анимации в jQuery

Практически все методы, которые мы рассматривали в двух предыдущих разделах, используют метод animate (). Этот метод позволяет создавать произвольную анимацию за счет изменения числовых атрибутов (например, height, width, opacity и др.).

Метод animate () имеет два формата,
animatе ( Изменяемые а трибуты, Опции)
animate {Изменяемые атрибуты[, Продолжительность[, Эффект [, Функция обратного вызова]]])

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

{
Атрибут1: "Значение1",
Атрибут2: "Значение2",
Атрибуты: "ЗначениеЫ"
}

Если название атрибута содержит дефис, то такое название необходимо указывать в стиле JavaScript (например, font Size вместо font-size). В качестве значения могут быть указаны:
число с абсолютными единицами измерения (например, рх, in и др.);
число с относительными единицами измерения % и em;
hide, show или toggle.

Можно также определять значения атрибута относительно его текущей позиции, указав перед значением += или - = (листинг 7.2).

Листинг 7.2. Перемещение элементов

<html>
<head>
<title>Перемещение элементов</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").animate({ left: "-=" + $("#txt1").val()},
1000);
   });
   $("#btn2").click(function() {
      $("#div1").animate({ left: "+=" + $("#txt1").val()},
1000);
   });
   $("#btn3").click(function() {
      $("#div1").animate({ top: "-=" + $("#txt1").val()},
1000);
   });
   $("#btn4").click(function() {
      $("#div1").animate({ top: "+=" + $("#txt1").val()},
1000);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:100px;
   height:100px;
   background-color:black;
}
</style>
</head>
<body>
<input type="text" value="50px" id="txt1">
<input type="button" value="Влево" id="btn1">
<input type="button" value="Вправо" id="btn2">
<input type="button" value="Вверх" id="btn3">
<input type="button" value="Вниз" id="btn4"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

В параметре Продолжительность может быть указано время выполнения анимации в миллисекундах или следующие значения:
fast — 200 миллисекунд;
normal — 400 миллисекунд;
slow — 600 миллисекунд.

В качестве примера рассмотрим изменение ширины элементов (листинг 7.3).

Листинг 7.3. Изменение ширины элементов

<html>
<head>
<title>Изменение ширины элементов</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").animate({ width: "hide" }, 300);
   });
   $("#btn2").click(function() {
      $("#div1").animate({ width: "show" }, 300);
   });
   $("#btn3").click(function() {
      $("#div1").animate({ width: "toggle" }, "slow");
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:150px;
   height:100px;
   background-color:black;
}
</style>
</head>
<body>
<input type="button" value="Скрыть" id="btn1">
<input type="button" value="Отобразить" id="btn2">
<input type="button" value="Скрыть/Отобразить" id="btn3"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

Если щелкнуть на кнопке Скрыть, то элемент свернется справа налево, а если затем щелкнуть на кнопке Отобразить, то он раскроется слева направо. Щелчок на кнопке Скрыть/Отобразить позволяет свернуть элемент (если он развернут) или развернуть (если он свернут).

В параметре Эффект могут быть указаны эффекты замедления из дополнительных модулей или два значения:

swing — в начале идет ускорение, а в конце замедление (значение по умолчанию);
linear — равномерная скорость движения.

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

function Название функции () {
// ...
}

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

{
0пция1: Значение1,
0пция2 : Значение2 ,
Опция: "Значение"
}

Могут быть указаны следующие опции:

duration— время выполнения анимации в миллисекундах или значения fast, normal и slow;
easing— эффект замедления из дополнительных модулей или значения swing и linear;
complete — ссылка на функцию, которая будет вызвана после окончания анимации;
queue— если указано значение false, то текущая анимация будет выполнена параллельно с последующими анимациями. Если указано значение true (значение по умолчанию), то анимации, заданные для одного и того же элемента, выполняются последовательно (листинг 7.4).

Листинг 7.4. Параллельное и последовательное выполнение анимации

<html>
<head>
<title>Параллельное и последовательное выполнение
анимации</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1")
      .css({ width: "100px", height: "20px", fontSize: "10px"
})
      .animate({ width: "450px", height: "100px" },
         { queue: false, duration: 2000 })
      .animate({ fontSize: "32px" }, 2000);
   });
   $("#btn2").click(function() {
      $("#div1")
      .css({ width: "100px", height: "20px", fontSize: "10px"
})
      .animate({ width: "450px", height: "100px" },
         { duration: 2000 })
      .animate({ fontSize: "32px" }, 2000);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:100px;
   height:20px;
   background-color:white;
   border:black thin dotted;
   font-size:10px;
}
</style>
</head>
<body>
<input type="button" value="queue:false" id="btn1">
<input type="button" value="queue:true" id="btn2"><br>
<div id="div1" class="cls1">Текст<div>
</body>
</html>

 

 

Прерывание анимации в jQuery

Если для одного элемента назначено несколько анимаций, то по умолчанию они выполняются по очереди. Пока не закончилась первая анимация, вторая не начнется. В случае, если анимация применена к разным элементам, то она будет выполняться одновременно. Для досрочного прерывания анимации предназначен метод stop () . Формат метода:

stop ( [Очистка очереди [, 3авершение анимации] ] )

Если параметры не указаны, то прерывается только текущая анимация. Иными словами, если в очереди несколько анимаций, то прервется текущая анимация и сразу начнется следующая.

Параметр Очистка очереди позволяет очистить очередь анимаций. Для этого необходимо указать значение true. Тогда прервется не только текущая анимация, но и все остальные.

В случае применения метода stop() без указания параметра Завершение анимации текущая анимация будет прервана и объект остановится в промежуточном состоянии. Если необходимо, чтобы анимация была сразу завершена и объект находился в конечном состоянии, тогда во втором параметре необходимо указать значение true.

Пример использования метода stop () приведен в листинге 7.5.

<html>
<head>
<title>Прерывание анимации</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      if ($("#chc1").is(":checked")) {
         $("#div1").stop().animate({ width: "0.1px" }, 3000);
      }
      else {
         $("#div1").animate({ width: "0.1px" }, 3000);
      }
   });
   $("#btn2").click(function() {
      if ($("#chc1").is(":checked")) {
         $("#div1").stop().animate({ width: "450px" }, 3000);
      }
      else {
         $("#div1").animate({ width: "450px" }, 3000);
      }
   });
   $("#btn3").click(function() {
      $("#div1").stop();
   });
   $("#btn4").click(function() {
      $("#div1").stop(true);
   });
   $("#btn5").click(function() {
      $("#div1").stop(true, true);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:450px;
   height:100px;
   background-color:black;
}
</style>
</head>
<body>
<input type="checkbox" id="chc1" checked> Прерывание анимации
<input type="button" value="Скрыть" id="btn1">
<input type="button" value="Отобразить" id="btn2">
<input type="button" value="Остановить" id="btn3">
<input type="button" value="Остановить все" id="btn4">
<input type="button" value="Остановить все и завершить"
id="btn5"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

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

Чтобы увидеть различные нюансы применения метода stop (), сбросьте флажок и несколько раз щелкните на кнопках Скрыть и Отобразить, чтобы создать очередь анимаций. Если теперь щелкнуть на кнопке Остановить, то текущая анимация будет прервана и сразу начнется следующая. Если щелкнуть на кнопке Остановить все, то текущая, а также все остальные анимации будут прерваны и объект остановится в промежуточном положении. Щелчок на кнопке Остановить все и завершить вызовет не только прерывание всех анимаций, но и полностью завершит текущую. Например, если ширина уменьшалась, то она сразу станет равна 0,1 рх, а если увеличивалась, то ее значение станет равно 450 рх.

 

Управление очередью анимаций в jQuery

Для управления очередью анимаций предназначены следующие методы.

• queue ([Название очереди] ) — возвращает массив функций в очереди. С помощью свойства length можно узнать количество анимаций в очереди.
alert($("#divl").queue().length);

• queue ( [Название очереди, ] Функция обратного вызова) — добавляет функцию в очередь. В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции() {
// ...
// Удаляем функцию из очереди после выполнения
$(this).dequeue();
}
Элемент, вызвавший событие, доступен внутри функции через указатель this.

• queue ([Название очереди, ]Новая очередь) — заменяет очередь всех элементов коллекции новой очередью (массивом функций). Очистить очередь можно так.
$ ("#divl") .queue( []);

• dequeue ( [Название очереди] ) — удаляет добавленную в очередь функцию после ее выполнения.

Необязательный параметр Название очереди во всех этих функциях по умолчанию имеет значение fx. Пример очистки очереди можно переписать следующим образом.
$("#divl") .queue ("fx", [] ) ;

Пример добавления функции в очередь приведен в листинге 7.6.

<html>
<head>
<title>Добавление функции в очередь</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var elem = $("#div1");
      elem.css({ width:"100px", height:"20px", fontSize:"10px"
});
      elem.text("Текст");
      elem.animate({ width:"450px", height:"100px" }, 2000);
      elem.queue(function() {
          $(this).text("Наш новый текст").dequeue();
      });
      elem.animate({ fontSize:"32px" }, 2000);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:100px;
   height:20px;
   background-color:white;
   border:black thin dotted;
   font-size:10px;
}
</style>
</head>
<body>
<input type="button" value="Показать" id="btn1"><br>
<div id="div1" class="cls1">Текст<div>
</body>
</html>


Партнеры сайта