如何向下滑动 div 然后 .fadeIn() 内容，反之亦然？

Question

目标

当用户单击该按钮时，相关 div 将：

1. 向下滑动
2. 停止
3. 淡入内容

当用户再次单击该按钮时，该 div 将：

1. 淡出
2. 停止
3. 向上滑动

当前位置

这是一个示例，其中 fadeIn 和淡出发生在正确的时间，但在淡入和淡出前后分别没有幻灯片效果
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

听起来因为您希望这两个操作同时发生，所以您应该使用 animate 函数。否则行动就会接二连三地发生。

如果您在运行元素之前知道元素的高度，那么您可以相当轻松地进行设置。这是一个非常粗略的示例： http://jsfiddle.net/tArQu/

Answer 3

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

这就是你所追求的？

Answer 4

如果你事先不知道元素的高度，那就稍微复杂一些。您必须直接设置不透明度动画以使其淡出，并且必须在“滑动”时使用 CSS 可见性隐藏内容。

CSS 可见性“隐藏”允许内容正常占据文档中的空间，但从视图中隐藏； CSS 显示“none”不仅隐藏元素，还将其从文档流中删除。通过使用可见性隐藏元素，我们可以将其向下滑动直到达到其完整高度，而元素的内容保持不可见。

类似地，使用 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");
});

注意：输入“visibility”和“visible”时要格外小心，因为它们很容易拼写错误——这是许多令人沮丧的错误的根源。

您不必使用可见性，因为您可以通过使内容最初透明来完成同样的事情，但使用它可以使正在发生的事情更加明确。也就是说，这也有效：

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

Answer 5

尝试一下：http://jsfiddle.net/solidsource/67XZX/