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中的大多数app都使用jQuery.因此,在阅读此jQuery vs Mootools之后,我决定开始使用jQuery是一个很好的机会.所以我的第一个需要是滑动这个DIV.它没有正常工作.

我做了更多的搜索,我发现这是jQuery中的一个旧bug,边缘和填充应用于DIV.解决方案是将DIV包装在另一个DIV中.它没有解决我的问题.

进一步搜索我发现这篇文章Slidingown动画跳过了.它修复了跳跃的一端,但不是在其他(Test2的在jQuery的玻片试验).

在Stack Overflow上我发现了这个jQuery IE jerky幻灯片动画.在评论中,我看到问题在于DIV中的P标签.如果我用解决问题的DIV标签替换P标签,但这不是一个合适的解决方案.

最后我发现了这个奇怪的jQuery行为幻灯片.阅读它我理解通过从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();

第二次更新:

您可以在此页面上看到jQuery自己站点上的错误(示例B): 教程:jQuery的实例

第三次更新:

试过jQuery 1.4,没有更多的机会:-(

Answer 1

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

border: 1px solid transparent;

无需修复宽度或高度或其他任何内容,动画也不会跳转.万岁!

Answer 2

解决方案是滑动div必须具有以像素为单位设置的宽度.不要使用'auto'和'%'.而且你会有很好的结果!问题在于滑动div中的内联元素.

但如果它们的宽度为px,则高度相同.试试吧.

Answer 3

我今天遇到了这个问题.我注意到,禁用所有CSS修复了问题.此外,我知道它之前工作正常,所以它一定是最近导致问题的变化.

事实证明,我使用CSS中的过渡来缓和进出悬停.

一旦这些过渡从元素中删除,我添加一切都很好.

因此,如果您遇到同样的问题,只需将这些行添加到您要添加的元素中:

-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;

(我可能已经滥用了一些转换,不仅仅是将它们添加到我想要转换的元素中,而是将它们用于整个网站.)

Answer 4

尝试从所有元素中删除所有CSS边距.通常,生涩动画来自动画框架未考虑的边距.

Answer 5

当您的情况下父div“ .wrapper” 具有填充时，就会发生抽搐。

填充在子div上，而不在父div上。jQuery设置动画高度而不是填充。

例：

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

希望这可以帮助。