Есть частая проблема, точнее особенность 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:

$(document).ready(function(){
$('#tabs div').hide(); // Скрываем все элементы div
$('#tabs div:first').show(); // Показываем только первый элемент div
$('#tabs ul li:first').addClass('active'); // Устанавливаем стиль для первого div в положении активный
$('#tabs ul li a').click(function(){ //Выполняем, если пользователь кликнул на ссылку
$('#tabs ul li').removeClass('active'); // Удаляем активный стиль со всех ссылок
$(this).parent().addClass('active'); //Устанавливаем активный стиль для нажатой ссылки
var currentTab = $(this).attr('href'); // Устанавливаем значение текущей вкладки в соответствии со значением нажатой ссылки
$('#tabs div').hide(); // Скрываем все элементы div
$(currentTab).show(); // Показываем div с id равынм значению текущего tab(вкладки)
return false;
});
});

HTML струтура для вкладок, используется не сортированный список для ссылок навигации и контейнер div для каждой секции. Каждая ссылка связанна по id с конкретным контейнером div.
Собственно сам код HTML.

<div id="tabs">
<ul>
<li><a href="#tab-1">Tab One</a></li>
<li><a href="#tab-2">Tab Two</a></li>
<li><a href="#tab-3">Tab Three</a></li>
<li><a href="#tab-4">Tab Four</a></li>
</ul>
<div id="tab-1">
<h3>Tab 1</h3>
<p>Some content</p>
</div>
<div id="tab-2">
<h3>Tab 2</h3>
<p>Some content</p>
</div>
<div id="tab-3">
<h3>Tab 3</h3>
<p>Some content</p>
</div>
<div id="tab-4">
<h3>Tab 4</h3>
<p>Some content</p>
</div>
</div>

Ну и css стили для вкладок

#tabs {
font-size: 90%;
margin: 20px 0;
}
#tabs ul {
float: right;
background: #E3FEFA;
width: 600px;
padding-top: 4px;
}
#tabs li {
margin-left: 8px;
list-style: none;
}
* html #tabs li {
display: inline; /* ie6 double float margin bug */
}
#tabs li,
#tabs li a {
float: left;
}
#tabs ul li a {
text-decoration: none;
padding: 8px;
color: #0073BF;
font-weight: bold;
}
#tabs ul li.active {
background: #CEE1EF url(img/nav-right.gif) no-repeat right top;
}
#tabs ul li.active a {
background: url(img/nav-left.gif) no-repeat left top;
color: #333333;
}
#tabs div {
background: #CEE1EF;
clear: both;
padding: 20px;
min-height: 200px;
}
#tabs div h3 {
text-transform: uppercase;
margin-bottom: 10px;
letter-spacing: 1px;

#tabs div p {
line-height: 150%;
}

Пример можно посмотреть здесь.
Либо скачать целиком тут.
Оказывается есть доки по созданию вкладок на сайте JQuery. Надо будет посмотреть.