jQuery幻灯片是跳跃的 [英] jQuery slide is jumpy

问题描述

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

I tried to slide in and out a DIV with the toggle function of jQuery but the result is always jumpy at the start and/or end of the animation. Here's the js code that I use:

$(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

You can also see the complete example here: jQuery Slide test

我通常使用Mootools，我可以毫不费力地完成这个幻灯片。但我正在Django开始一个新项目，大多数app都在Django使用jQuery。因此，在阅读本 jQuery vs Mootools 之后，我认为这将是开始使用jQuery的好时机。所以我的第一个需要是滑动这个DIV。并且它无法正常工作。

I usually use Mootools and I can do this slide without any problems with it. But I'm starting a new project in Django and most app in Django use jQuery. So for that and after reading this jQuery vs Mootools I decided that will be a good occasion to start using jQuery. So my first need was to slide this DIV. And it didn't work properly.

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

I did more search and I found that's an old bug in jQuery with margin and padding applied to the DIV. The solution is to wrap the DIV in another DIV. It didn't fix the thing in my case.

进一步搜索我发现这篇文章 Slidingown animation jumprevisited 。它修复了一端的跳转而不是另一端的跳转（ jQuery Slide test中的 Test2 ）。

Searching further I found this post Slidedown animation jumprevisited. It fix a jump at one end but not at the other (Test2 in jQuery Slide test).

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

On Stack Overflow I found this jQuery IE jerky slide animation. In the comments I saw that the problem is with the P tag inside the DIV. If I replace the P tags with DIV tags that fix the problem but that's not a proper solution.

最后我发现这是奇怪的jQuery行为幻灯片。阅读它我理解通过从P标签切换到DIV解决的问题是P的边缘（DIV中不存在）和元素之间边距的崩溃。因此，如果我将边距切换为填充，则可以解决问题。但是我放弃了边距的崩溃行为，崩溃了我想要的东西。

Lastly I found this Weird jQuery behavior slide. Reading it I understood that the problem resolved by switching from P tag to DIV was with the margins of the P (not present in the DIV) and the collapsing of margins between elements. So if I switch the margins to paddings it fix the problem. But I loose the collapsing behavior of margins, collapsing that I want.

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

Honestly I can say that my first experience with jQuery is not really good. If I want to use one of the simplest effect in jQuery I have to not use the proper function (slideToggle) but instead use some hand made code AND wrap the DIV in another DIV AND switch margins to paddings, messing my layout.

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

Did I miss a simpler solution ?

正如krdluzni建议的那样，我尝试使用animate方法编写自定义脚本。这是我的代码：

As krdluzni suggest, I tried to write as custom script with the animate method. Here's my code:

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在动画结束时重新开始，但覆盖了其余的内容。

But that doesn't work either because jQuery always set the overflow to visible at the end of the animation. So the DIV is reapearing at the end of the animation but overlaid on the rest of the content.

我也尝试使用UI.Slide（以及缩放和大小）。它可以工作，但DIV下面的内容不随动画移动。它只会在动画结束/开始时跳转以填补空白。我不希望这样。

I tried also with UI.Slide (and Scale and Size). It works but the content below the DIV doesn't move with the animation. It only jump at the end/start of the animation to fill the gap. I don't want that.

更新：

解决方案的一部分是设置高度在任何事情之前动态容器DIV。这解决了一个跳跃。但不是因为利润率下降导致的原因之一。这是代码：

One part of the solution is to set the height of the container DIV dynamically before anything. This solve one jumping. But not the one cause by collapsing margin. Here's the code:

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

第二次更新：

您可以在此页面上看到jQuery自己网站上的错误（示例B）：
教程：jQuery的实例

You can see the bug on the jQuery own site at this page (Example B): Tutorials:Live Examples of jQuery

第三次更新：

尝试使用jQuery 1.4，没有更多的机会： - （

Tried with jQuery 1.4, no more chance :-(

推荐答案

我发现一致的是设置一个看不见的1px边框：

I found what works consistently is setting an invisible 1px border:

border：1px solid transparent;

不需要修复宽度或高度或其他任何东西，动画不会跳跃。万岁！

No need to fix the width or height or anything else and the animation doesn't jump. Hooray!

这篇关于jQuery幻灯片是跳跃的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！