Question

目标

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

向下滑动
停止
淡出内容

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

淡出
停止
向上滑动

当前位置

以下是一个示例，其中淡入淡出和淡出淡出在正确的时间发生，但在淡入淡出之前和之后没有幻灯片效果和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
            );
        });
    }   
}

Working example on JS Fiddle

对于IE，只需确保内容背后的背景颜色为cleartype。

Answer 2

听起来好像你希望这两个操作同时发生，你应该使用animate function。否则行动将陆续到来。

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

Answer 3

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

你在追求什么？

Answer 4

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

CSS可见性“隐藏”允许内容占据文档中通常会占用的空间，但是从视图中隐藏; CSS显示“无”不仅隐藏元素，而是将其从文档流中删除。通过使用可见性隐藏元素，我们可以将其向下滑动直到它达到其全高，同时元素的内容保持不可见。

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

Answer 5

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

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

目标

当前位置

5 个答案: