English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Существует множество функций, которые можно использовать для создания анимации, и функция animate является одной из наиболее распространенных. Вот краткое описание способа использования этой функции.
Основная форма функции animate
Основная форма анимации, реализуемой с помощью animate:
$(selector).animate({params},speed,callback);
Где {params} является обязательным элементом, это объект, который указывает на CSS-стили, которые элемент будет иметь после выполнения анимации, speed и callback являются опциональными, где speed указывает на скорость выполнения анимации, значение может быть числовым типом (например, 1000 означает, что анимация выполняется за 1 секунду), slow и fast. callback указывает на функцию, которая будет выполнена после завершения анимации.
Пример кода:
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$("document").ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>Начать анимацию</button>
<p>По умолчанию, все элементы HTML имеют статическое положение и не могут быть перемещены. Чтобы манипулировать положением, запомните, что сначала необходимо установить свойство CSS position элемента в relative, fixed или absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Множественные формы присвоения переменных объекта {params}
О переменных объекта {params}, их можно присвоить следующим образом.
Форма абсолютных значений
Пример кода, приведенный в предыдущем разделе,assigns the params object with absolute values.
Форма относительных значений
Например, добавление '+' или '-' перед значением переменной.
Пример кода:
<script>
$("document").ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
</script>
show, hide и toggle
значения переменных объекта params, мы также можем присвоить им три указанных значения, например, следующий код делает так, чтобы содержимое тега div исчезло.
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
Данное руководство по реализации анимационных эффектов на странице с помощью jQuery (пример кода) является полным содержанием, которое я хочу поделиться с вами. Надеюсь, это поможет вам и希望大家多多支持呐喊 руководства.