jQuery, пожалуй, самая распространенная библиотека JavaScript в мире, и ее внимание к простоте дало ей тот успех, которого она испытывает сейчас.
В jQuery имеется широкий набор плагинов для проектирования пользовательского интерфейса , но он заставляет вас включать не более одного базового исходного файла, чтобы получить возможность создавать плавные анимации между браузерами.
Поскольку вы, наверное, уже много слышали о преимуществах jQuery из-за большого шума вокруг него, я углублюсь в код. Все примеры кода функциональны и протестированы в Firefox 3.6: вы можете вставить их в пустой HTML-файл и сразу приступить к взлому JavaScript и jQuery. Я предполагаю, что у вас уже есть базовые знания jQuery и JavaScript, так как объяснение анонимных функций здесь выходит за рамки этой статьи.
Сокрытие и показ
Первый пример является самым простым, и он будет служить для представления инфраструктуры jQuery и получения работающей анимации. Мы динамически вставляем кнопку, которая при нажатии скрывает или показывает абзац, с которым она связана. В jQuery jargon это действие называется переключением .
<html>
<head>
<title>jQuery animations</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('<button>Toggle</button>').click(function() {
$('p#showHide').toggle();
}).insertBefore('p#showHide');
});
</script>
</head>
<body>
<p id="showHide">I will be shown or hidden.</p>
</body>
</html>
Как и многие другие JavaScript-фреймворки, jQuery может быть включен путем ссылки на его последнюю версию 1.x в Google CDN (нет необходимости загружать какие-либо файлы .js на ваш сервер). У jQuery есть Facade, объект jQuery , который можно использовать для доступа ко всем необходимым функциям. Псевдонимом для объекта jQuery является переменная $ global. Глобальные переменные звучат странно, но в JavaScript это довольно распространенный шаблон.
Когда анонимная функция передается в $ Facade, она будет выполнена, когда документ будет полностью загружен. Наша функция создает кнопку (это происходит при передаче строки HTML в $) и связывает ее событие onclick с вызовом метода toggle (), который отображает или скрывает выбранный абзац в зависимости от его текущего состояния. Наконец, мы связываем вызов insertBefore () после клика () , чтобы вставить кнопку в DOM.
Скрытие и показ (улучшено)
toggle () может фактически принимать функции в качестве аргументов. В этом случае он будет циклически переключаться между различными функциями, выполняя по одному при каждом щелчке на вызываемом элементе.
<html>
<head>
<title>jQuery animations</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var button = $('<button>Hide</button>').toggle(function() {
$('p#showHide').hide();
button.text('Show');
},
function() {
$('p#showHide').show();
button.text('Hide');
}).insertBefore('p#showHide');
});
</script>
</head>
<body>
<p id="showHide">I will be shown or hidden.</p>
</body>
</html>
Первая функция скрывает абзац и меняет текст кнопки. Второй делает то же самое, но с противоположным намерением.
Затухание
Затухание воздействует на непрозрачность элемента, заставляя его исчезать или появляться. Элементы, которые исчезают, исчезают изящно, с плавным переходом, который заменяет простое скрытие и показ, который мы создали ранее.
<html>
<head>
<title>jQuery animations</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var button = $('<button>Hide</button>').toggle(function() {
$('p#showHide').fadeOut();
button.text('Show');
},
function() {
$('p#showHide').text('I\'m coming back...');
$('p#showHide').fadeIn(10000, function() {
$('p#showHide').text('I\'m back from the dead.');
});
button.text('Hide');
}).insertBefore('p#showHide');
});
</script>
</head>
<body>
<p id="showHide">I will be faded out by manipulation of my opacity.</p>
</body>
</html>
Многие функции jQuery принимают обратные вызовы в качестве аргументов. Каждый JavaScript API является асинхронным и функции, такие как fadeOut (), возвращаются сразу после их вызова, даже если переход все еще выполняется (в данном случае это занимает 10 секунд.) Однако вы можете передать обратный вызов, который будет выполнен по завершении.
скольжение
То, что мы можем сделать с замиранием, мы можем сделать и со скольжением. Выдвигающиеся элементы проскальзывают под предыдущие элементы, освобождая место на странице.
<html>
<head>
<title>jQuery animations</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var button = $('<button>Hide</button>').toggle(function() {
$('p#showHide').slideUp(5000);
button.text('Show');
},
function() {
$('p#showHide').text('I\'m coming back...');
$('p#showHide').slideDown('normal', function() {
$('p#showHide').text('I\'m back from the dead.');
});
button.text('Hide');
}).insertBefore('p#showHide');
});
</script>
</head>
<body>
<p id="showHide">I will slowly slide up and hide.</p>
</body>
</html>
Опять же, мы можем указать длительности с помощью таких строк, как «slow», «normal» и «fast» или через миллисекунды.
Пользовательская анимация
Когда обычная анимация не обрезает ее, мы можем прибегнуть к методу animate (), который производит переход по числовым свойствам CSS. Мы просто указываем цель свойств, которые мы хотим достичь после анимации.
<html>
<head>
<title>jQuery animations</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#animated').animate({
'height' : '200px',
'width' : '200px'
});
});
</script>
</head>
<body>
<p id="animated" style="background-color: gray;">I will be animated.</p>
</body>
</html>
Переключение анимации
Конечно, мы можем собрать все вместе и переключать различные анимации скрытия / показа.
<html>
<head>
<title>jQuery animations</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var button = $('<button>Restrict</button>').toggle(
function() {
button.text('Enlarge');
$('#animated').animate({
'height' : '200px',
'width' : '200px'
});
},
function() {
button.text('Restrict');
$('#animated').animate({
'height' : '400px',
'width' : '400px'
});
}).insertBefore('#animated');
});
</script>
</head>
<body>
<p id="animated" style="height: 400px; width: 400px; background-color: gray;">I will be animated.</p>
</body>
</html>
Пользовательские длительности анимации и обратные вызовы
Пользовательские анимации также могут принимать различные параметры, такие как длительность в миллисекундах или в качестве ключевого слова, или обратный вызов для выполнения по завершении.
<html>
<head>
<title>jQuery animations</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var button = $('<button>Restrict</button>').toggle(
function() {
button.text('Enlarge slowly');
$('#animated').animate({
'height' : '200px',
'width' : '200px'
});
},
function() {
button.text('Restrict');
$('#animated').animate({
'height' : '400px',
'width' : '400px'
}, {
duration: 10000,
complete: function() {
$('#animated').animate({
'font-size' : '20px'
})
}
});
}
).insertBefore('#animated');
});
</script>
</head>
<body>
<p id="animated" style="height: 400px; width: 400px; background-color: gray;">I will be animated.</p>
</body>
</html>
Вывод
Я надеюсь, что это был хороший обзор нативных возможностей jQuery для анимации HTML-страниц. Иногда методы очень перегружены, как в случае $ или toggle (), но jQuery имеет очень хорошую документацию, и я рекомендую вам обратиться к официальному API, чтобы полностью узнать, на что способен jQuery.