Question

所以我正在学习jQuery，我认为有些东西我不知道。我在“div”标签上使用以下代码：

$("#faq-group-notice").animate({ height:'hide', opacity:'hide' });

它在完成动画时似乎是最后的跳跃。关于如何摆脱它的任何想法？

编辑：div标签的css

<div id="faq-group-notice" class="flash notice hidden"></div>

.hidden { display: none; }

.notice {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}

Answer 1

查看此update to your jsFiddle。

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

在我调整你的jsFiddle（上面链接）时，我只是添加了一个包含你正在隐藏/显示的内容的div，我已经移动了你的css类flash和notice到内部div。现在，所有的可见内容（包括边距和边框）都在里面 #faq-group-notice，所以当高度动画效果运行时，它会折叠所有内容 - 不仅仅是边境内的东西。

Answer 2

@Mark，

你想要的只是slideDown和向上，你可以使用这个

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

请参阅jquery api了解多个选项

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

Answer 3

虽然我认为@gov可能会使用his answer来解决您的问题，但我选择提供this JS Fiddle example作为......进一步的建议。

这使用以下jQuery：

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

并且需要用户交互（我认为这是您在真实用例中的意图）才能关闭#faq-group-notice 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);
                        });
    });

Revised JS Fiddle demo

<强>被修改重新修改了jQuery和demo，以回应OP的评论：

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

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

Re-revised JS Fiddle demo

Answer 4

@gov是对的，使用其中一种幻灯片*方法可能会更有意义，因为你正在尝试做什么。但是，如果您想自己animate()，那么您需要动画占用空间的所有内容，包括margin-bottom：

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

回调只是为了清理最后的东西。例如：http://jsfiddle.net/ambiguous/w5gVU/1/

Answer 5

如果从<a href="#">Show ...</a>标记调用动画，请记住在点击处理程序上返回false。

此外，如果您的div具有静态位置，它将按下它下面的所有内容。要解决这个问题，请将其置于绝对或相对位置，但请注意，当它扩展时，它可能会覆盖其他内容。

jQuery动画导致屏幕跳转

5 个答案: