jQuery fadeIn и fadeOut - замена div

Этот код, безусловно, можно было бы сделать более эффективным и гибким, но для простого примера из 6 элементов, как показано выше, этого должно быть достаточно. В основном это было сделано просто как доказательство концепции.

Я решил добавить классы программно, но в идеале вы должны добавить классы в HTML. Если бы это был я, я бы, вероятно, также использовал расширение вместо замены строки идентификатора.

РЕДАКТИРОВАТЬ, добавлены исправления:
Рекурсивная функция для последовательной анимации гарантирует, что затухание будет обработано в нужное время. Для этого может быть более эффективный метод, например использование счетчика, но всего для 6 элементов это должно подойти, и это более точно соответствует исходному коду.
Исправлена ​​обработка анимации в неправильное время, например, когда вы нажмите несколько ссылок одновременно, заставляя несколько панелей пытаться исчезнуть, останавливая и заканчивая анимацию.

jQuery(function($){
    //add links/panels class to all elements whose id begins with link/panel
    $("[id^=link]").addClass("links");
    $("[id^=panel]").addClass("panels");

    $(".links").click(function(e){
        //find all panels, make a normal array, and stop/finish all animations
        var panels=$.makeArray($(".panels").stop(true, true));

        //find panel to show
        var panelShow=$("#"+this.id.replace("link","panel"));

        //recursive function to execute fades in sequence
        function queueFX(queue){
            if(queue.length==0){
                panelShow.fadeIn("slow");
                return;
            }
            $(queue.shift()).fadeOut("slow", function(){
                queueFX(queue);
            });
        }
        queueFX(panels);

        //stop event propogation and default behavior, commented out because you don't seem to want this behavior
        e.preventDefault();
        //e.stopPropagation();
        //return false;
    });
});

Имея ваши идентификаторы, это может быть так:

$.each([1,2,3,4,5,6], function(_, index) {
    $('#link' + index).click(function() {
        $('[id^=panel]').fadeOut('slow', function() {
            $('#panel' + index).fadeIn('slow');
        });
    })
})

Лучше всего использовать http://api.jquery.com/toggle/.

Toggle позволяет вам анимацию для одного

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
  });
});

Что касается истинного сокращения кода, я бы использовал идентификатор класса для ваших панелей.

Определите группы панелей, такие как

$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {

а затем назначьте связанные элементы HTML классом, например

Ваш jQuery теперь может быть $(".panelGroup1").fadeOut...

. селектор класса для jQuery, а # — это селектор идентификатора.

Проверьте селекторы, и вы сможете делать кучу других сумасшедших вещей

http://api.jquery.com/?ns0=1&s=Selector&go=

Много хороших решений, у меня есть общий комментарий:

Кажется немного ненужным, чтобы каждая панель имела уникальный идентификатор. У вас может быть веская причина для этого, но разве недостаточно сгруппировать панели с помощью селектора классов? Это сделало бы ваш общий код, а также ваш jquery, намного проще и легче в обслуживании.

Вы можете сделать что-то вроде

function fadeElementIn(fadedElement) {
    $("[id^=panel]").fadeOut("slow");
    $(fadedElement).fadeIn("slow");
}

А потом:

$(document).ready(function(){

    $("#link1").click(fadeElementIn($("#panel1")));
    $("#link2").click(fadeElementIn($("#panel2")));
    $("#link3").click(fadeElementIn($("#panel3")));
    $("#link4").click(fadeElementIn($("#panel4")));
}

не забудьте отрегулировать положение ваших элементов, если вы хотите, чтобы тот, который исчезает, и тот, который исчезает, занимали одно и то же пространство

ваше здоровье