Необходимо создать простую анимацию для элемента div — при нажатии кнопок элемент должен сдвигаться влево или вправо на 50 пикселов.

Опубликовал: admin Friday, July 12, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Решение

Для решения задачи используем метод animate() (листинг 3.3.1).

Листинг3 .3 .1 . Использование метода animate()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-3-1</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css"> div {
position:absolute;
background-color:#369; left:100px; width:90px; height:90px; margin:5px;
}
</style>
<script type="text/javascript">
$(function(){
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
});
</script>
</head>
<body>
<button id="left">влево</button><button id="right">вправо</button>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-3-3-1</title>

position:absolute;

background-color:#369; left:100px; width:90px; height:90px; margin:5px;

}

</style>

$(function(){

$("#right").click(function(){

$(".block").animate({"left": "+=50px"}, "slow");

});

$("#left").click(function(){

$(".block").animate({"left": "-=50px"}, "slow");

});

</script>

</head>

<body>

<button id="left">влево</button><button id="right">вправо</button>

</body>

</html>

Обсуждение

HTML-код, приведенный в листинге 3.3.1, определен условием задачи — кнопки влево и вправо, и элемент div, который необходимо двигать при их нажатии. Обработчики события click для кнопок очень похожи. В обоих случаях мы выбираем элемент по имени его класса — block и применяем метод animate(). Этот метод в состоянии принимать до четырех аргументов, из которых мы используем только два.

В первом аргументе передаем объект, состоящий из пар ключ/значение, которые определяют различные CSS-свойства элемента. В нашем случае мы пользуемся только свойством left, задавая его значение на 50 пикселов больше (или меньше) предыдущей величины.

Во втором аргументе передаем скорость выполнения эффекта в виде строкового значения. Можно указать и число (в миллисекундах), определяющее длительность эффекта.

В качестве третьего и четвертого аргументов можно передать название эффекта и функцию, вызываемую по окончании анимации.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

Необходимо создать простую анимацию для элемента div — при нажатии кнопок элемент должен сдвигаться влево или вправо на 50 пикселов.

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply