滑动后显示/隐藏动画淡入淡出

时间:2012-12-14 05:09:01

标签: jquery animation fadein fadeout

我试图在滑动后添加fadeIn / fadeOut动画:

http://jsfiddle.net/lamberta/e44kB/

我尝试添加和写入 .fadeOut(350, function () { & .fadeOut(350, function () {

但是没有工作,我无法弄清楚把它放在哪里,有人知道如何把它放在这里吗?

1 个答案:

答案 0 :(得分:0)

你可以通过

来做到这一点

jsFiddle

脚本

function toggleSlider() {
    if ($("#demo").is(":visible")) {
        $("#hola").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#hola").slideUp();
            }
        );
    }
    else {
        $("#demo").slideDown(600, function(){
            $("#hola").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}

HTML

<a href="#" onclick="toggleSlider();">toggle</a>
<div id="demo" style="display:none;background:#eee;padding:10px;">
    <div id="hola" 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.

    </div>
</div>