Как скользить вниз по div, а затем .fadeIn() по содержимому и наоборот?

Это будет работать:

HTML:

<a href="#" onclick="toggleSlider();">toggle</a>
<div id="panelThatSlides" style="display:none;background:#eee;padding:10px;">
    <div id="contentThatFades" style="opacity:0;filter:alpha(opacity=0);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl. Nunc non placerat odio. Cras feugiat  pulvinar diam sed sollicitudin. Quisque ut elit lacus, et gravida nunc.  Maecenas ac enim ligula. Aenean felis nunc, vulputate pellentesque  vehicula nec, tristique a tortor. Curabitur et semper dui. Sed id nisl  turpis. Sed vel nunc et nisi laoreet feugiat. Sed lobortis enim sed arcu  tempor vehicula. Vivamus dui ligula, ultricies id egestas ut, rhoncus  et est. Pellentesque dignissim diam vel nibh tempus condimentum. Etiam  sodales fermentum pharetra. Etiam faucibus tempus malesuada. Mauris  nulla lectus, laoreet sit amet cursus vel, ultricies at enim. Sed  facilisis rutrum eros, nec malesuada eros iaculis ac.
        <br /><br />
        In consectetur faucibus fermentum. Pellentesque habitant morbi tristique  senectus et netus et malesuada fames ac turpis egestas. Cras nunc  magna, vestibulum eget pulvinar hendrerit, tincidunt id arcu. Nullam  dolor ligula, suscipit placerat condimentum ac, feugiat ut mauris.  Suspendisse semper dolor condimentum dui ornare rhoncus. In bibendum  massa vel erat tristique congue. Donec vel mi quam, ac iaculis odio.  Nulla interdum orci quis ligula aliquam viverra. Nam eget egestas  mauris. Sed in massa quis erat venenatis aliquam.
    </div>
</div>

JavaScript:

function toggleSlider() {
    if ($("#panelThatSlides").is(":visible")) {
        $("#contentThatFades").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#panelThatSlides").slideUp();
            }
        );
    }
    else {
        $("#panelThatSlides").slideDown(600, function(){
            $("#contentThatFades").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}

Рабочий пример на JS Fiddle.

Для IE просто убедитесь, что за содержимым для ясного типа есть фоновый цвет.

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

Если вы знаете высоту элемента перед его запуском, то вы можете установить все довольно легко. Вот очень грубый пример: http://jsfiddle.net/tArQu/

$("#button").toggle(function(){
    $("#content").slideDown().fadeIn();
    }, function(){
    $("#content").slideUp().fadeOut();
    return false;
});    

Это то, что вам нужно?

Если вы не знаете высоту элемента заранее, это немного сложнее. Вы должны анимировать непрозрачность напрямую, чтобы исчезнуть, и вы должны скрыть содержимое с видимостью CSS, пока оно «скользит».

Видимость CSS «скрытая» позволяет содержимому занимать то место в документе, которое оно обычно занимает, но быть скрытым от просмотра; Отображение CSS «нет» не просто скрывает элемент, но и удаляет его из потока документов. Скрыв элемент с помощью видимости, мы можем сдвинуть его вниз до полной высоты, в то время как содержимое элемента останется невидимым.

Точно так же исчезновение содержимого при использовании функции jQuery fadeIn предполагает, что элемент изначально скрыт с отображением «none», поэтому это не будет работать, если мы используем видимость. Вместо этого мы делаем элемент изначально полностью прозрачным (непрозрачность 0,0); как только скользящая анимация завершена, мы устанавливаем видимость на «видимую», а затем анимируем непрозрачность от полностью прозрачной до полностью непрозрачной (от 0,0 до 1,0).

Предполагая, что элемент изначально скрыт (отображение CSS "none" или функция скрытия jQuery):

$(element).css("visibility", "hidden").slideDown("slow", function() {
    $(this).css("opacity", 0.0).css("visibility", "visible").animate({
        "opacity": 1.0
    }, "slow");
});

N.B.: Будьте особенно осторожны при вводе слов «visibility» и «visible», так как в них легко ошибиться, что является источником множества неприятных ошибок.

Вам НЕ ОБЯЗАТЕЛЬНО использовать видимость, так как вы можете добиться того же, сделав контент изначально прозрачным, но используя его, вы сделаете более явным то, что происходит. То есть это тоже работает:

$(element).css("opacity", 0.0).slideDown("slow", function() {
    $(this).animate({
        "opacity": 1.0
    }, "slow");
});

Попробуйте: http://jsfiddle.net/solidsource/67XZX/