Есть частая проблема, точнее особенность JQuery, о которой часто забывают дизайнеры и разработчики, она заключается в том, что вся анимация на странице при вызове попадает в “стек”. Если у вас на странице есть множество элементов с анимацией, например фотографии в фотогаллерее, то когда пользователь быстро проведет по нескольким фотографиям и перестанет двигать мышью, он будет наблюдать как анимация появляется постепенно на каждом элементе. Наглядно эту проблему можно посмотреть на сайте druckbar, если вы быстро проведете мышкой по четырем панелькам, то будете долго ждать пока в шапке появится соответствующие картинки.

Вы можете решить эту проблему одним из следующих способ:

Использовать метод .stop(). Когда этот метод используется на элементе, он немедленно прекращает его анимацию, если конечно она есть.

$("ol#gallery li").hover(function () {
  $(".thumb-meta", this).stop().animate({ bottom: '0px' }, 400);
},
function () {
  $(".thumb-meta", this).stop().animate({ bottom: '-22px' }, 400);
});

Другой способ решить проблему со “стеком” анимации, это использовать плагины, например hoverIntent. Этот плагин делает анимацию доступной только, если пользователь двигает мышью достаточно медленно.

Старайтесь не злоупотреблять с анимацией контента.

Поскольку Javascript функции очень легко реализовать с помощью JQuery, многие увлекаются анимацией  и доставляют этим пользователю немало неудобств. Допустим, удобно использовать JQuery для подгрузки изображений по мере прокрутки текста, это позволяет быстро прогрузить страницу с множество картинок. Но зачем показывать эти изображения при помощи анимации ?! В этом нет никакаго смысла.

Поэтому, прежде чем анимировать, подумайте, не помещает ли анимация концентрации  пользователя на основном контенте. Анимация должна помогать пользователю, делать сайт более интерактивным, а не мешать ему работать с сайтом.

Итак…

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: