Столкнулся с тем, что необходимо было привлечь внимание пользователя к последней новости на сайте. Решил реализовать это на 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:
Текст fhfhfghfgh
ой блин случайно написал извините