javascript - jQuery 幻灯片是跳动的

Question

我尝试使用 jQuery 的切换功能滑入和滑出 DIV，但结果总是在动画开始和/或结束时跳动。这是我使用的 js 代码:

$(document).ready(function(){
    $('#link1').click(
        function() {
            $('#note_1').parent().slideToggle(5000);
        }
);

和 HTML:

<div class="notice">
    <p>Here's some text. And more text. <span id="link1">Test1</span></p>
    <div class="wrapper">
        <div id="note_1">
            <p>Some content</p>
            <p>More blalba</p>
        </div>
    </div>
</div>

您还可以在此处查看完整示例:jQuery Slide test

我通常使用 Mootools，我可以毫无问题地制作这张幻灯片。但我正在 Django 中开始一个新项目，Django 中的大多数应用程序都使用 jQuery。因此，在阅读此 jQuery vs Mootools 之后我决定这将是开始使用 jQuery 的好时机。所以我的第一个需要是滑动这个 DIV。而且它没有正常工作。

我进行了更多搜索，发现这是 jQuery 中的一个老错误，它对 DIV 应用了边距和填充。解决方案是将 DIV 包装在另一个 DIV 中。它没有解决我的问题。

进一步搜索我发现这篇文章 Slidedown animation jumprevisited .它在一端修复了一个跳跃，但在另一端没有修复(Test2 in jQuery Slide test)。

我在 Stack Overflow 上找到了这个 jQuery IE jerky slide animation .在评论中，我看到问题出在 DIV 内的 P 标签上。如果我用 DIV 标签替换 P 标签来解决问题，但这不是正确的解决方案。

最后我找到了这个 Weird jQuery behavior slide .阅读它我了解到，通过从 P 标签切换到 DIV 解决的问题是 P 的边距(DIV 中不存在)和元素之间边距的折叠。因此，如果我将边距切换为填充，它就可以解决问题。但是我放弃了边距的折叠行为，按照我想要的方式折叠。

老实说，我第一次使用 jQuery 的体验并不好。如果我想使用 jQuery 中最简单的效果之一，我不必使用正确的函数 (slideToggle)，而是使用一些手工制作的代码并将 DIV 包装在另一个 DIV 中并将边距切换为填充，从而弄乱我的布局。

我错过了一个更简单的解决方案吗？

正如 krdluzni 所建议的，我尝试使用 animate 方法将其编写为自定义脚本。这是我的代码:

var $div = $('#note_2').parent();
var height = $div.height();

$('#link2').click(
    function () {
        if ( $div.height() > 0 ) {
            $div.animate({ height: 0 }, { duration: 5000 }).css('overflow', 'hidden');
        } else {
            $div.animate({ height : height }, { duration: 5000 });
        }

        return false;
});

但这也不起作用，因为 jQuery 总是在动画结束时将溢出设置为可见。所以 DIV 在动画结束时重新出现，但覆盖在其余内容上。

我也尝试过使用 UI.Slide(以及 Scale 和 Size)。它可以工作，但 DIV 下面的内容不会随着动画移动。它仅在动画的结尾/开头跳转以填补空白。我不想要那个。

更新:

解决方案的一部分是先动态设置容器 DIV 的高度。这样就解决了一个跳跃。但不是利润率崩溃的一个原因。这是代码:

var parent_div = $("#note_1").parent();
parent_div.css("height", parent_div.height()+"px");
parent_div.hide();

第二次更新:

您可以在此页面(示例 B)中查看 jQuery 自己站点上的错误: Tutorials:Live Examples of jQuery

第三次更新:

尝试过 jQuery 1.4，没机会了 :-(

Answer 1

我发现设置一个不可见的 1px 边框一直有效:

border: 1px solid transparent;

无需固定宽度或高度或其他任何内容，动画不会跳转。万岁!