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

Това ще работи:

HTML:

<a href="/bg#" 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 просто се уверете, че има фонов цвят зад съдържанието за cleartype.

Изглежда, че тъй като искате двете операции да се извършват едновременно, трябва да използвате функцията animate. В противен случай действията ще идват едно след друго.

Ако знаете височината на елемента, преди да го стартирате, тогава можете да настроите нещата доста лесно. Ето един изключително груб пример: http://jsfiddle.net/tArQu/

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

Това е, което търсите?

Ако не знаете предварително височината на елемента, е малко по-сложно. Трябва да анимирате непрозрачността директно, за да избледнее, и трябва да скриете съдържанието с CSS видимост, докато се „плъзга“.

Видимостта на CSS „скрита“ позволява на съдържанието да заема мястото в документа, което обикновено би заело, но да бъде скрито от изгледа; CSS показването "няма" не просто скрива елемента, а го премахва от документния поток. Като скрием елемента с помощта на видимост, можем да го плъзгаме надолу, докато достигне пълната му височина, докато съдържанието на елемента остава невидимо.

По същия начин, избледняването на съдържанието при използване на функцията fadeIn на jQuery предполага, че даден елемент първоначално е скрит с дисплей „няма“, така че няма да работи, ако използваме видимост. Вместо това, ние правим елемента първоначално напълно прозрачен (непрозрачност 0.0); след като плъзгащата се анимация завърши, задаваме видимост на „видима“ и след това анимираме непрозрачността от напълно прозрачна до напълно непрозрачна (0,0 до 1,0).

Ако приемем, че елементът първоначално е скрит (CSS дисплей "няма" или функция за скриване на jQuery):

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

N.B.: Бъдете особено внимателни, когато въвеждате „видимост“ и „видим“, тъй като те лесно се пишат грешно - източникът на много разочароващи грешки.

Не е необходимо да използвате видимост, тъй като можете да постигнете същото, като направите съдържанието първоначално прозрачно, но използването му прави по-ясно какво се случва. Тоест това също работи:

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

Опитайте това: http://jsfiddle.net/solidsource/67XZX/