Структура программы на примере простейшей программы
JQuery
для чайников. Урок 3. Эффект
"бегающего" квадрата.
Исходники к уроку можно скачать
здесь.
Сегодня мы рассмотрим эффект перемещающегося по экрану квадрата (посмотреть
эффект в действии можно
здесь), который
меняет свой размер и прозрачность. Вот ее исходный код:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8"
/>
<title>jQuery.
Chainable Transition Effects</title>
<script
type='text/javascript'
src='jquery.js'></script>
<script
type="text/javascript">
$(document).ready(function(){
$(".run").click(function(){
$("#box").animate({opacity:
"0.1",
left:
"+=400"},
1200)
.animate({opacity:
"0.4",
top:
"+=160",
height:
"20",
width:
"20"},
"slow")
.animate({opacity:
"1",
left:
"0",
height:
"100",
width:
"100"},
"slow")
.animate({top:
"0"},
"fast")
.slideUp()
.slideDown("slow")
return
false;
});
});
</script>
<style
type="text/css">
body {
margin: 20px auto;
padding: 0;
width: 580px;
font: 80%/120% Arial, Helvetica, sans-serif;
}
a {
font-weight: bold;
color: #000000;
}
#box {
background: red;
height: 100px;
width: 100px;
position: relative;
}
</style>
</head>
<body>
<p><a
href="#"
class="run">Запустить</a></p>
<div
id="box">
</div>
</body>
</html> |
Теперь немножко комментариев к коду. Как и в
уроке 1, сам код
JQuery занимает всего несколько строк:
|
$(document).ready(function(){
$(".run").click(function(){
$("#box").animate({opacity:
"0.1",
left:
"+=400"},
1200)
.animate({opacity:
"0.4",
top:
"+=160",
height:
"20",
width:
"20"},
"slow")
.animate({opacity:
"1",
left:
"0",
height:
"100",
width:
"100"},
"slow")
.animate({top:
"0"},
"fast")
.slideUp()
.slideDown("slow")
return
false;
});
}); |
Как видим, точно так же как и в
уроке 1,
здесь используется анимация (метод animate), он
который задает анимированное изменение размера, местоположение и прозрачность.
Если мы хотим, что бы прямоугольник "уезжал" дальше, то можем, например,
изменить первую строку анимации:
|
$("#box").animate({opacity:
"0.1",
left:
"+=800"},
1200) |
можно поменять размер квадрата или его местоположение после того, как он
сдвинулся влево а потом вниз:
|
.animate({opacity:
"0.4",
top:
"+=360",
height:
"5",
width:
"5"},
"slow") |
|