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

目标

当用户点击按钮时，所讨论的div将会：

滑下

停止

淡入内容

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

消退

停止

向上滑动

当前位置

这里有一个例子， fadeIn和fadeOut在正确的时间发生，但是在fadeIn和fadeOut之前和之后没有幻灯片效果
http://jsfiddle.net/tkRGU/1/

也有这个选项，它有slideToggle函数，但没有分别出现在幻灯片之后和之前的fadeIn和fadeOut 。
http://jsfiddle.net/MY8DD/7/

---

这将工作：

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小提琴上的工作示例。

对于IE来说，确保在cleartype的内容背后有背景色。

---

这听起来像是因为你希望两个操作同时发生，你应该使用动画功能。 否则，这些行动将会陆续出现。

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

---

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

那你在追求什么？

链接地址: http://www.djcxy.com/p/21383.html

上一篇: How to slide down a div then .fadeIn() the content and vice versa?

下一篇: replicate bing image homepage effect with jquery (fade in, then fade out)