Модуль UI Effects — визуальные эффекты

Модуль UI Effects предоставляет множество визуальных эффектов, а также добавляет возможность плавного изменения цвета и управления классами стилей. Все базовые методы расположены в модуле Effects Core. Чтобы плавно изменять цвета или управлять классами стилей, достаточно подключить только модуль Effects Core. Сами же эффекты можно подключать по мере надобности.

Для загрузки переходим на страницу http://jqueryui.com/download. Устанавливаем флажки Effects Core, 1.7.2, а также флажки всех эффектах. Затем щелкаем на кнопке Download. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы два файла:

  • jquery-1.3.2.min.js (папка js);
  • jquery-ui-1.7.2.custom.min.js (папка js).

Плавное изменение цвета

При рассмотрении метода animate() говорилось, что метод позволяет создавать произвольную анимацию только за счет изменения числовых атрибутов (например, height, width, opacity и др.). Модуль Effects Core добавляет возможность плавного изменения значений атрибутов, задающих цвет, — backgroundColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, color и outlineColor. Цвет может быть задан одним из трех способов:

  • шестнадцатеричным значением, например, #008800;
  • с помощью функции rgb(), например, rgb(0, 88, 0);
  • названием цвета, например, "green".

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

Листинг 12.31. Модуль UI Effects, плавное изменение цвета

<!doctype html>
<html>
<head>
<title>Модуль UI Effects, плавное изменение цвета</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#div1 {
   position:absolute; top:50px; left:50px; width:100px; height:100px;
   padding:2px; border:1px solid #000000; text-align:center;
   background-color:#000000; color:#e8e8e8;
}
</style>
<script>
$(document).ready(function() {
   $("#btn1").click(function() {
      var color = $("#txt1").val();
      if (color.length == 0) alert("Не заполнено поле");
      else $("#div1").animate({ backgroundColor: color }, 2000);
   });
});
</script>
</head>
<body>
Цвет: <input type="text" id="txt1">
<input type="button" value="Задать значение цвета" id="btn1">
<br><br>
<div id="div1">Плавное изменение цвета</div>
</body>
</html>

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе