jQuery动画使屏幕跳转

所以我在学习jQuery，我觉得我缺少了一些东西。我在“div”标记上使用以下代码：

$（“#常见问题小组通知”）.animate（{高度：'hide'，不透明度：'hide'）

完成动画时，它似乎是最后一次跳跃。有没有办法摆脱这个问题

编辑：div标记的css


。隐藏{
显示：无；
}

。注意{padding:0.8em；margin-bottom:1em；border:2px-solid 35; ddd；}
@Mark

你所需要的就是向右上下滑动，你可以用这个

$("#faq-group-notice").slideDown();
$("#faq-group-notice").slideUp();

有关多个选项，请参见jQueryAPI

http://api.jquery.com/slideUp/

@马克

你所需要的就是向右上下滑动，你可以用这个

$("#faq-group-notice").slideDown();
$("#faq-group-notice").slideUp();

有关多个选项，请参见jQueryAPI

http://api.jquery.com/slideUp/

如果正在从
标记调用动画，请记住在单击处理程序中返回false

此外，如果您的div有一个静态位置，它将向下推它下面的所有内容。若要修复此问题，请绝对或相对定位它，但请注意，当它展开时，可能会覆盖其他内容。
如果动画是从
标记调用的，请记住在单击处理程序中返回false

此外，如果您的div有一个静态位置，它将向下推它下面的所有内容。要解决这个问题，请绝对或相对地定位它，但要注意，当它扩展时，它可能会覆盖其他内容。
虽然我认为@gov可能解决了您的问题，但我选择提供进一步的建议

这将使用以下jQuery：

$('#faq-group-notice').slideDown(1000);
$('#faq-group-notice').click(
    function(){
        $(this).animate({opacity: 0},500).slideUp(500);
    });

并且需要用户交互（我认为这是您在实际用例中的意图）来关闭
#faq组通知
div


编辑了，并略微修改了演示，jQuery：

$('#faq-group-notice').slideDown(1000);
$('#faq-group-notice').click(
    function(){
        $(this).animate({opacity: 0},500,
                        function(){
                            $(this).animate(
                                {
                                    'border-width':0
                                }, 100).slideUp(500);
                        });
    });



已编辑
针对OP的评论，重新修订了jQuery和演示：

实际上，这只是向用户发送一点信息的一种方式。我希望它在一段时间后消失。目前，我有超时执行此代码运行3秒后

.
虽然我认为@gov可能解决了你的问题，但我选择提供进一步的建议

这将使用以下jQuery：

$('#faq-group-notice').slideDown(1000);
$('#faq-group-notice').click(
    function(){
        $(this).animate({opacity: 0},500).slideUp(500);
    });

并且需要用户交互（我认为这是您在实际用例中的意图）来关闭
#faq组通知
div


编辑了，并略微修改了演示，jQuery：

$('#faq-group-notice').slideDown(1000);
$('#faq-group-notice').click(
    function(){
        $(this).animate({opacity: 0},500,
                        function(){
                            $(this).animate(
                                {
                                    'border-width':0
                                }, 100).slideUp(500);
                        });
    });



已编辑
针对OP的评论，重新修订了jQuery和演示：

实际上，这只是向用户发送一点信息的一种方式。我希望它在一段时间后消失。目前，我有超时执行此代码运行3秒后

.
看看这个

“跳转”来自您在隐藏/显示的div上放置的边距和边框。高度动画（以及内置的幻灯片效果）不考虑边距和边框。因此，动画运行（例如，在“隐藏”上），它将元素的内部高度折叠为零，然后应用
display:none
——由于元素的边距和边框仍然可见，因此应用
display:none
会导致元素“闪烁”而不存在。当显示这样一个元素时，会发生相反的情况——它“闪现”存在，然后内部高度从零扩展到元素的原始/自然高度

在我调整你的JSFIDLE（上面链接）时，我只添加了一个div来包装你隐藏/显示的内容，我将你的css类
flash
和
notice
移到了内部div。现在，所有可见的内容（包括边距和边框）都在
内，因此，当高度动画效果运行时，它会折叠所有内容，而不仅仅是边框内的内容。
请查看此图

“跳转”来自您在隐藏/显示的div上放置的边距和边框。高度动画（以及内置的幻灯片效果）不考虑边距和边框。因此，动画运行（例如，在“隐藏”上），它将元素的内部高度折叠为零，然后应用
display:none
——由于元素的边距和边框仍然可见，因此应用
display:none
会导致元素“闪烁”而不存在。当显示这样一个元素时，会发生相反的情况——它“闪现”存在，然后内部高度从零扩展到元素的原始/自然高度

在我调整你的JSFIDLE（上面链接）时，我只添加了一个div来包装你隐藏/显示的内容，我将你的css类
flash
和
notice
移到了内部div。现在，所有可见的内容（包括边距和边框）都在
内，因此，当高度动画效果运行时，它会折叠所有内容，而不仅仅是边框内的内容。
@gov是正确的，使用幻灯片*方法之一可能会对您尝试的操作更有意义。但是，如果您想自己制作
animate（）
动画，则需要制作所有占用空间的动画，包括
页边距底部
：

$("#faq-group-notice").animate({
    height:       '0px',
    marginBottom: '0px',
    padding:      '0px',
    borderWidth:  '0px',
    opacity:      0
}, function() { $(this).remove() });

回调只是为了在最后把事情清理干净。例如：
@gov是正确的，使用幻灯片*方法之一可能会对您尝试的操作更有意义。但是，如果您想自己制作
animate（）
动画，则需要制作所有占用空间的动画，包括
页边距底部
：

$("#faq-group-notice").animate({
    height:       '0px',
    marginBottom: '0px',
    padding:      '0px',
    borderWidth:  '0px',
    opacity:      0
}, function() { $(this).remove() });

回调只是为了在最后把事情清理干净。例如：
@mark s，你能为faq组发布css吗-notice@marks是你的div位置：相对？？？@mark我创建了一个jsfiddle