главная

Теги:Анимация JQuery


Анимация. JQuery

Теперь пример посложнее, но он поможет Вам лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность.

В первую очередь мы подключаем между тегами <head></head>

<script type="text/javascript" src="jquery.js"></script>

Далее мы туда же вписываем следующее:

(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: когда прогрузилась страница (DOM готов к манипуляциям)
Линия 2: привязываемся к событию click для элемента <a class=”run”>
Линия 3: манипулируем элементом <div id=”box”> – уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)
Линия 4: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20;

скорость анимации указывается вторым параметром : “slow”, “normal”, “fast” или в миллисекундах
Линия 5: затем opacity=1, left=0, height=100, width=100, скорость – “slow”
Линия 6: затем top=0, скорость – “fast”
Линия 7: затем slideUp (с дефолтной скоростью анимации – “normal”)
Линия 8: затем slideDown, скорость – “slow”
Линия 9: возвращаем false для того чтобы браузер не перешел по ссылке

 

 

Ну и конечно же теперь мы подключим наши стили:


body {
	margin: 20px auto;
	padding: 0;
	width: 580px;
	font: 80%/120% Arial, Helvetica, sans-serif;
}
a {
	font-weight: bold;
	color: #000000;
}
#box {
	background: #6699FF;
	height: 100px;
	width: 100px;
	position: relative;
}


Между тегами < body>< /body> вставляем основное тело нашего будещего примера:

<p><a href="#" class="run">Run</a></p> <div style="opacity: 1; left: 0px; top: 0px; height: 100px; display: block; width: 100px;" id="box"> </div>

Ну вот и все, запускаем, смотрим, все работает !

Спасибо за внимание! Увидимся в следующих уроках

 

Урок Создан:2009-01-11 Просмотров:2462

Добавить комментарий:


Copyright© 2009 Hosted by Zhost