JQuery вкладки динамического содержимого с на клик FADEOUT + FadeIn и слайд без пользовательского интерфейса

Question

Я абсолютно новичок в JQuery (но я имею некоторое представление о JS и программирования на других языках)
У меня 2 цели:

1. очень простые вкладки (или что-нибудь для элементов управления), при щелчке со старым (активным) отображением содержимого вкладки, а затем нажатие на вкладку содержимого затухания (в том же месте)
2. то же, что и 1, но с горизонтальным слайдом контента вместо выцветания. Я не хочу JQuery UI, потому что это слишком много для такого рода вещей, и я хочу учиться.

Цель 1, JS:

$(function() { 
$("div.tabs > div:gt(0)").hide(); 
$("div.tabs ul a:first").addClass('selected'); 

$('div.tabs ul a').click(function() { 
$("div.tabs > div").fadeOut('normal', function() { 
$("div.tabs > div").fadeIn('slow'); 
}); 
$('div.tabs ul a').removeClass('selected'); 
$(this).addClass('selected'); 
    return false; 
}); 
}); 

HTML:

<div class="tabs"> 
    <ul> 
     <li><a href="#first">First</a></li> 
     <li><a href="#second">Second</a></li> 
     <li><a href="#third">Third</a></li> 
    </ul> 
    <div id="first"> 
     <h2>First content</h2> 
    </div> 
    <div id="second"> 
     <h2>Second content</h2> 
    </div> 
    <div id="third"> 
     <h2>Third content</h2> 
    </div> 
</div> 

Как найти активный DIV, вместо того, тыкая все дивы с $("div.tabs > div") в fadeOut и в fadeIn линии?

AIM2:
Я читал о slideUp и slideDown, но это вертикальная, возможно, я имею использовать animate()?
Как? Если это слишком сложно, как это хорошо для меня с вертикальным слайдом ...

Answer 1

Цель 1: добавить активный класс к текущему содержимому div. См. demo для измененного кода.

Цель 2: Существует несколько способов сделать это без пользовательского интерфейса jQuery, в зависимости от того, чего вы хотите достичь и где вы хотите его использовать. См. altered demo для некоторых скользящих эффектов.

Answer 2

ответ Павла упрощен aim1: без дополнительных классов, оптимизированный для "div" + $(this).attr('href') и решения для FADEOUT является div:visible:

$(function() { 
$("div.tabs > div:gt(0)").hide(); 
$("div.tabs ul a:first").addClass('selected'); 

$('div.tabs ul a').click(function() { 
    var newDiv = "div" + $(this).attr('href'); 
    $("div.tabs > div:visible").fadeOut('normal', function() { 
    $(newDiv).fadeIn('slow'); 
    }); 
    $('div.tabs ul a').removeClass('selected'); 
    $(this).addClass('selected'); 
    return false; 
}); 
}); 

Спасибо Paul.