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

Question

目标

当用户单击按钮时，有问题的 div 将：

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

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

1. 消退
2. 停止
3. 向上滑动

当前位置

这是一个示例，其中淡入和淡出发生在正确的时间，但在淡入和淡出之前和之后分别没有幻灯片效果
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 display "none" 不仅隐藏元素，还将它从文档流中移除。通过使用可见性隐藏元素，我们可以将其向下滑动，直到它达到其全高，而元素的内容保持不可见。

类似地，使用jQuery的fadeIn函数淡化内容假设一个元素最初是隐藏的，显示为“none”，所以如果我们使用可见性，它将不起作用。相反，我们使元素最初完全透明（不透明度 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");
});

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

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

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

Answer 5

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