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

Question

Цель

Когда пользователь нажимает кнопку, рассматриваемый div будет:

1. скользить вниз
2. stop
3. исчезать вcontent

Когда пользователь снова нажимает кнопку, div будет:

1. исчезать
2. stop
3. скользить вверх

Текущая позиция

Вот пример, где fadeIn и fadeOut происходит в нужное время, но слайд отсутствует эффект до и после fadeIn и fadeOut соответственно
http://jsfiddle.net/tkRGU/1/

Также есть эта опция, которая имеет функцию slideToggle , но не имеет fadeIn и fadeOut происходит после и перед слайдом соответственно.
http://jsfiddle.net/MY8DD/7/

Answer 1

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

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 просто убедитесь, что позади содержимого для cleartype есть цвет фона.

Answer 2

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

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

Answer 3

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

Это то, что вы ищете?

Answer 4

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

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

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

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

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

Примечание: будьте особенно внимательны, набирая «видимость» и «видимый», так как они легко написаны с ошибками - источник многих неприятных ошибок.

Вы неt ДОЛЖНЫ использовать видимость, поскольку вы можете сделать то же самое, сделав контент изначально прозрачным, но используя его, вы сделаете более ясным, что происходит.То есть это тоже работает:

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

Answer 5

Дайте этому шанс: http://jsfiddle.net/solidsource/67XZX/