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
            );
        });
    }   
}

Working example on JS Fiddle .

对于 IE，只需确保 ClearType 内容后面有背景色即可。