Эффекты jQuery UI

165

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

Анимация цвета

В библиотеке jQuery UI поддержка анимации цвета усилена за счет расширения возможностей метода jQuery animate(). Можно анимировать одно из нескольких свойств CSS, определяющих цвета элемента. Список свойств, поддерживаемых методом animate(), приведен в таблице ниже:

CSS-свойства, поддерживаемые методом animate() jQuery UI
Свойство Описание
backgroundColor Устанавливает цвет фона элемента
borderTopColor, borderBottomColor, borderLeftColor, borderRightColor Устанавливает цвет отдельных границ элемента
color Устанавливает цвет текста для элемента
outlineColor Устанавливает цвет обводки - используется для визуального выделения элемента

Чтобы анимировать цвета, необходимо передать методу animate() в качестве аргумента объект отображения данных map, детализирующий свойства, которые нужно анимировать, и их целевые значения. Соответствующий пример приведен ниже:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <style type="text/css">
        #animTarget {
            background-color: white;
            color: black;
            border: medium solid black;
            width: 200px; height: 50px;
            text-align: center;
            font-size: 25px;
            line-height: 50px;
            display: block;
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript">
$(function() {
	
    $('button').button().click(function() {      
        $('#animTarget').animate({
            backgroundColor: "black",
            color: "white"
        }, 1000)   
    })
			
});
    </script>   
</head>
<body>
    <div id=animTarget>
        Привет!
    </div>
    <button>Анимировать цвет</button> 
</body>
</html>

Запустить пример

В этом документе для элемента div первоначально устанавливаются основной черный цвет и белый фон. Щелчок на кнопке приводит к вызову метода animate(), который изменяет эти цвета соответственно на белый и черный. Смена цветов происходит плавно, и оба цвета анимируются одновременно. Результат проилллюстрирован на рисунке:

Анимация цвета

Обратите внимание на то, что в элементе style используются стандартные имена свойств CSS, например background-color. При указании того же свойства в объекте map мы переходим к использованию так называемого "верблюжьего регистра" (camel case) - backgroundColor. Это позволяет указывать CSS-свойство в качестве свойства объекта JavaScript, не заключая термин в кавычки.

В этом примере для указания цветов используются литералы CSS: black и white. Литеральные имена существуют для большого количества цветов, но метод animate() воспринимает также шестнадцатеричные значения, например #FFFFFF, и RGB-значения, например rgb(255, 255, 255).

Анимация на основе классов

Библиотека jQuery UI предоставляет удобный способ анимации наборов CSS-свойств с использованием классов. Вместо того чтобы указывать каждое свойство по отдельности, вы просто определяете свойства и значения в классе и указываете jQuery UI на необходимость добавления класса в один или несколько элементов. Переход элементов из одного состояния в другое будет автоматически анимироваться библиотекой jQuery UI. Демонстрационный пример приведен ниже:

<!DOCTYPE html>
...
    <style type="text/css">
        .elemClass {
            background-color: white;
            color: black;
            border: medium solid black;
            width: 200px; height: 50px;
            text-align: center;
            font-size: 25px;
            line-height: 50px;
            display: block;
            margin-bottom: 10px;
        }
        .myClass {
            font-size: 40px; 
			background-color: black; 
			color: white;
        }
    </style>
    <script type="text/javascript">
$(function() {
	
    $('button').button().click(function() {      
        if (this.id == "add") {
            $('#animTarget').addClass("myClass", "fast")
        } else {
            $('#animTarget').removeClass("myClass", "fast")
        }   
    })
			
});
    </script>   
</head>
<body>
    <div id=animTarget class="elemClass">
        Привет!
    </div>
    <button id="add">Добавить класс</button>
    <button id="remove">Удалить класс</button>
</body>
</html>

Запустить пример

Здесь мы также сталкиваемся с примером того, как jQuery UI расширяет существующие методы jQuery addClass() и removeClass() для наделения их дополнительной функциональностью. Версии jQuery UI делают то же самое, но теперь можно задать длительность анимации, указав ее в качестве второго аргумента при вызове метода, и jQuery UI анимирует переход из одного класса в другой.

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

Здесь действуют стандартные правила каскадирования стилей CSS, т.е. свойства, указанные в классе, применяются лишь в том случае, если он обладает наибольшей специфичностью по отношению к целевому элементу или элементам. В предыдущем примере мы установили стиль начального состояния элемента с помощью атрибута id, но в данном примере, для того чтобы модификации возымели эффект, для этой цели используется класс.

Смена классов

Кроме улучшения некоторых стандартных методов, jQuery UI определяет метод switchClass(), который удаляет один класс и добавляет другой, одновременно анимируя переход из одного состояния в другое. Соответствующий демонстрационный пример приведен ниже:

<!DOCTYPE html>
...
    <style type="text/css">
        .elemClass {
            background-color: white;
            color: black;
            border: medium solid black;
            width: 200px; height: 50px;
            text-align: center;
            font-size: 25px;
            line-height: 50px;
            display: block;
            margin-bottom: 10px;
        }
        .classOne {
            font-size: 25px; 
			background-color: white; 
			color: black;
        }
		.classTwo {
            font-size: 40px; 
			background-color: black; 
			color: white;
        }
    </style>
    <script type="text/javascript">
$(function() {
	
    $('button').button().click(function() {      
        $('.classOne').switchClass("classOne", "classTwo", 800);
		$('.classTwo').switchClass("classTwo", "classOne", 800); 
    })
			
});
    </script>   
</head>
<body>
    <div id=animTarget class="elemClass classOne">
        Привет!
    </div>
    <button>Сменить класс</button>
</body>
</html>

Запустить пример

Аргументами метода switchClass() являются класс, подлежащий удалению, класс, который должен быть добавлен, и длительность анимации. В данном примере оба класса определяют одни и те же свойства, но это вовсе не обязательно.

Использование анимационных эффектов jQuery UI

Библиотека jQuery UI включает ряд анимационных эффектов, которые можно применять к элементам точно так же, как и эффекты ядра jQuery. Я рекомендую применять их умеренно. Действительно, анимация, применяемая в разумных пределах, может значительность повысить комфортность работы с приложением, но нередко анимационные эффекты становятся источником раздражения и недовольства пользователей. В библиотеке имеется множество анимационных эффектов, включая blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size и slide.

В этой статье лишь показано, как применяются эти эффекты, без детального обсуждения каждого из них. Неплохое описание эффектов, а также настроек, применяемых к некоторым из них, доступно на странице docs.jQuery.com/UI/Effects.

Использование эффектов для отображения и сокрытия элементов

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

<!DOCTYPE html>
...
    <style type="text/css">
        .elemClass {
            font-size: 25px; background-color: white; color: black;
            border: medium solid black; width: 200px; height: 50px;
            text-align: center; line-height: 50px; display: block; margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript">
$(function() {
	
    $('button').button().click(function() {
        switch (this.id) {
            case "show":
        $('#animTarget').show("fold", "fast");
        break;
            case "hide":
        $('#animTarget').hide("fold", "fast");
        break;
            case "toggle":
        $('#animTarget').toggle("fold", "fast");
        break;                   
        }
    })
			
});
    </script>   
</head>
<body>
    <div id=animTarget class="elemClass">
        Привет!
    </div>
    <button id="hide">Скрыть</button>
    <button id="show">Показать</button>
    <button id="toggle">Переключить</button>
</body>
</html>

Запустить пример

В примере предусмотрены три кнопки, щелчки на которых позволяют вызывать методы show(), hide() и toggle(). Для всех трех кнопок задана анимация fold, длительность которой определяется литеральным значением fast. Эти методы работают подобно их аналогам из ядра jQuery, за исключением того, что в данном случае выполняется анимация переходов.

Применение автономных эффектов

В библиотеке jQuery UI определен метод effect(), который позволяет применить анимацию к элементу без использования логики его "сокрытия/отображения". При удачном выборе типа анимации эта возможность является удобным способом привлечения внимания пользователя к тому или иному элементу в документе. Соответствующий демонстрационный пример приведен ниже:

<!DOCTYPE html>
...
    <style type="text/css">
        .elemClass {
            font-size: 25px; background-color: white; color: black;
            border: medium solid black; width: 200px; height: 50px;
            text-align: center; line-height: 50px; display: block; margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript">
$(function() {
	
    $('button').button().click(function() {
        $('#animTarget').effect("pulsate", 1000)
    })
			
});
    </script>   
</head>
<body>
    <div id=animTarget class="elemClass">
        Привет!
    </div>
    <button>Эффект</button> 
</body>
</html>

Запустить пример

В этом примере щелчок на кнопке приводит к применению эффекта "на месте", без каких-либо постоянных изменений видимости. В данном случае используется эффект pulsate, вызывающий пульсацию элемента.

Пройди тесты
Лучший чат для C# программистов