Question

我使用以下内容在常见问题解答页面上的隐藏div上创建淡入和淡出效果。问题是，它使隐藏的div快照打开和关闭，这是非常恼人的。我对javascript不太热，无法弄清楚如何将slideUp和slideDown纳入其中，因为我希望它也可以向上滑动并向下滑动。有没有办法让滑动函数进入这个脚本？感谢。

$(document).ready(function() {                                  
    $("a[name^='faq-']").each(function() {
        $(this).click(function() {
            if( $("#" + this.name).is(':hidden') ) {
                $("#" + this.name).fadeIn('slow');
            } else {
                $("#" + this.name).fadeOut('slow');
            }           
            return false;
        });
    });
});

Answer 1

您可以使用visibility: hidden隐藏div而不是display:none，通过小的CSS调整来解决此问题。这将为您正在褪色的DIV保留空间。进行。

你想滑动＆amp;同时褪色？尝试使用.animate()将不透明度设置为0/1，并使用height设置为max / 0。

Answer 2

如果你想使用淡化而不是slideUp/slideDown，你可以使用fadeTo(duration, opacity)，因为元素的空间得以维持，所以不会使东西跳跃。

如果你想要一个插件来组合幻灯片和淡入淡出，可以看一下：http://css-tricks.com/snippets/jquery/combine-slide-and-fade-functions/

将slideUp和slideDown添加到隐藏的div

2 个答案: