jQuery animate, привлекаем внимание пользователя

Столкнулся с тем, что необходимо было привлечь внимание пользователя к последней новости на сайте. Решил реализовать это на jQuery. Почитав официальную документацию, остановился на функции animate. И написал простенькую функцию для манипулирования со свойствами div.

Итак…

html код банально:

<div class="news_date">2009-07-3</div>

Свойство стилю:
.news_date { color:#0000FF; font-weight:bold;font-size:20px;}

Javascript код

<script>
//Запускаем после загрузки документа
$(document).ready(function(){
//Создаем функцию, которую потом будем запускать "в цикле"
function runIt() {

var x=0;//навсякий случай вводим переменную - показатель, какой именно этап сейчас запущен, хотя вообще-то jQuery ставит всю анимацию "в очередь".
$(".news_date").animate({
opacity: .1
}, 2000, "linear", function(){x=1;} );

if (x=1) {
$(".news_date").animate({
opacity: .9
}, 2000, "linear", function(){x=0;runIt();} );//callback функция, после завершения  анимациии, запустит нашу анимацию еще раз, бесконечный цикл.
}

}

runIt();//запускаем нашу фукцию сразу по загрузке документа

});
</script>

Что мы делаем в функции: animate({opacity: .1}, 2000, «linear», function(){x=1;} ); Изменяем параметры у класса .news_date, а имено параметр прозрачности, и делаем это в течении 2000 мс (милисекунд).
Вторая функция полностью обратный процесс.

Пример можно посмотреть здесь.
P.S. При желании можно поэкспериментировать еще с такими параметрами:
width:
marginLeft:
fontSize:
borderWidth:

2 thoughts on “jQuery animate, привлекаем внимание пользователя

Comments are closed.