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

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

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

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

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

Пример использования метода 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>
Предыдущая статья Все статьи Следующая статья