jQuery UI расширяет возможности эффектов jQuery.
ТвитнутьВозможность применения различных эффектов к элементам была и в jQuery. С помощью эффектов jQuery Вы, например, могли заставить абзац постепенно пропадать или появляться, применять к элементам анимацию и многое другое.
Эффекты jQuery UI значительно расширяют эти возможности. Теперь можно заставить элементы пропадать или появляться пятнадцатью разными способами.
В анимации Вы можете использовать свойства изменения цвета фона, текста и границ элементов.
jQuery UI также расширяет базовую функциональность jQuery для манипулирования классами оформления.
В jQuery UI можно использовать 15 различных эффектов для скрытия и отображения элементов на страницах.
Эффекты в jQuery UI могут использоваться со следующими методами:
Синтаксис:
effect(эффект,опции,скорость,функция) hide(эффект,опции,скорость,функция) show(эффект,опции,скорость,функция)
эффект указывает название эффекта, который будет применен. Некоторые эффекты (такие как scale, transfer и size) для своего вызова требуют задания дополнительных опций.
скорость указывает скорость применения эффекта в миллисекундах (1000 миллисекунд = 1 секунда).
функция задает функцию, код которой будет выполнен после завершения применения эффекта.
Эффекты jQuery UI приведены в таблице ниже:
| Название эффекта | Описание |
|---|---|
| Blind | Эффект "Ослепление". |
| Bounce | Эффект "Отскок". |
| Clip | Эффект "Отсекание". |
| Drop | Эффект "Падение". |
| Explode | Эффект "Взрыв". |
| Fade | Эффект "Выцветание". |
| Fold | Эффект "Складка". |
| Highlight | Эффект "Освещение". |
| Puff | Эффект "Рассеивание". |
| Pulsate | Эффект "Пульсирование". |
| Scale | Эффект "Масштабирование". С помощью опции percent:проценты Вы можете задать на сколько процентов от текущего размера необходимо уменьшить или увеличить элемент. |
| Shake | Эффект "Тряска". |
| Slide | Эффект "Скольжение". |
| Size | Эффект "Калибровка". С помощью опции to: и включенных в нее опций width:ширина_в_пикселях и height:высота_в_пикселях Вы можете задать размеры, до которых необходимо "откалибровать" текущий элемент. |
| Transfer | Эффект "Переход". С помощью опции to:id_или_class_элемента Вы можете указать элемент, в который перейдет текущий элемент. С помощью опции className:имя_класса Вы можете оформить эффект перехода с помощью CSS. |
Увидеть все эффекты не требующие дополнительных опций для вызова в действии можно в следующем примере:
Пример
$(document).ready(function() {
$("#but1").click(function(){
$("#testcontainer").hide($("#effect1").val(),{},1000 );
});
$("#but2").click(function(){
$("#testcontainer").show($("#effect1").val(),{},1000 );
});
});
В следующем примере Вы можете увидеть использование эффектов требующих для вызова дополнительных опций.
Пример
$(document).ready(function() {
$("#effect1").change(function(){
if ($("#effect1").val()==="scale"){
$("#scalecont").css("display","block");
$("#transfercont").css("display","none");
$("#sizecont").css("display","none");}
else if ($("#effect1").val()==="transfer"){
$("#transfercont").css("display","block");
$("#scalecont").css("display","none");
$("#sizecont").css("display","none");}
else if ($("#effect1").val()==="size"){
$("#sizecont").css("display","block");
$("#transfercont").css("display","none");
$("#scalecont").css("display","none");}
});
$("#but1").click(function(){
var options={};
if ($("#effect1").val()==="scale"){
var options={percent:50};
options.percent=$("#scalepercent").val();}
else if ($("#effect1").val()==="transfer"){
var options={to:"#but1", className:"transfer-effect"}
options.to=$("#trans1").val();
options.className=$("#trans2").val();}
else if ($("#effect1").val()==="size"){
var options={to:{width:200,height:200}};
options.to.width=$("#size1").val();
options.to.height=$("#size2").val();}
$("#testcontainer").effect($("#effect1").val(), options ,1000);
});
});
jQuery UI расширяет возможности jQuery анимации. Теперь Вы можете создавать анимацию, которая может манипулировать цветом.
В анимации теперь могут быть использованы следующие CSS свойств:
Пример
$(document).ready(function() {
$("#but1").click(function(){
$("#testcontainer").animate({
borderColor:"#EA3B53",
borderWidth:3,
backgroundColor:"#97D400",
width:500,
height:160},1500);
});
});
Эффекты jQuery UI расширяют базовую функциональность jQuery для манипулирования с классами.
Теперь переключение между различными оформлениями элемента будет происходить анимировано.
Синтаксис:
/* Добавит новый класс элементу с анимированным переходом между различными состояниями оформления */ addClass(имя_класса, продолжительность_перехода) /* Удалит указанный класс у элемента с анимированным переходом между различными состояниями оформления */ removeClass(имя_класса, продолжительность_перехода) /* Удалит указанный класс если он присутствует и добавит его если он отсутствует с анимированным переходом между различными состояниями оформления */ toggleClass(имя_класса, продолжительсть_перехода) /* Переключится с класса указанного в первом параметре на второй с анимированным переходом между различными состояниями оформления */ switchClass(класс, новый_класс, продолжительность_перехода)
Пример
$(document).ready(function(){
$("#but1").click(function(){
$(".el1").addClass("newclass",1000);
});
$("#but2").click(function(){
$(".el1").removeClass("newclass",1000);
});
$("#but3").click(function(){
$(".el1").toggleClass("newclass",1000);
});
$("#but4").click(function(){
$(".el1").switchClass("el1","newclass");
});
});
Задание 1 выполните подпункты перечисленные ниже (подробности в редакторе):