jQuery幻灯片是跳动
我尝试用jQuery的切换function来滑入和滑出DIV，但结果总是在animation的开始和/或结束处跳动。 以下是我使用的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与Mootools后，我决定，这将是一个很好的机会，开始使用jQuery。 所以我的第一个需要是滑动这个DIV。 它没有正常工作。
我做了更多的search，我发现这是jQuery中的一个旧的bug，将margin和padding应用于DIV。 解决scheme是将DIV包装到另一个DIV中。 这并没有解决我的情况。
进一步search，我发现这个职位Slidedownanimationjumprevisited 。 它修复了一个跳跃，但在另一端（ jQuery Slide Test中的 Test2 ）。
在堆栈溢出我发现这个jQuery IE生涩的幻灯片animation 。 在评论中，我看到问题是在DIV内的P标签。 如果我用DIV标签replaceP标签来解决问题，但这不是一个合适的解决scheme。
最后，我发现这个奇怪的jQuery行为幻灯片 。 阅读它，我明白，通过从P标签切换到DIV解决的问题是与P的边缘（DIV中不存在）和元素之间的边缘的崩溃。 所以，如果我将边距切换到填充，它解决了这个问题。 但我放松了利润率的崩溃行为，崩溃了我想要的。
老实说，我可以说，我第一次使用jQuery的经验并不是很好。 如果我想在jQuery中使用最简单的效果之一，我不得不使用适当的函数（slideToggle），而是使用一些手工编写的代码，并将DIV包装到另一个DIV中，并将边距切换到填充，从而使我的布局变得糟糕。
我错过了一个更简单的解决scheme吗？
正如krdluznibuild议，我试图用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总是将溢出设置为可见的animation结束。 所以DIV在animation的结尾处重新渲染，但覆盖了其余的内容。
我也尝试了UI.Slide（和规模和大小）。 它可以工作，但DIV下面的内容不随animation移动。 它只在animation结束/开始处跳跃以填补空白。 我不要那个。
更新：
解决scheme的一部分是在任何事情之前dynamic设置容器DIV的高度。 这解决了一个跳跃。 但不是崩溃边缘的原因。 代码如下：
var parent_div = $("#note_1").parent(); parent_div.css("height", parent_div.height()+"px"); parent_div.hide();
第二次更新：
你可以在这个页面上看到jQuery自己的网站上的错误（例子B）： 教程：jQuery实例
第三次更新：
试用jQuery 1.4，没有更多的机会:-(
我发现一贯的工作是设置一个不可见的1px边框：
border: 1px solid transparent;
无需修复宽度或高度或其他任何东西，animation不会跳转。 万岁！
解决scheme是滑动div必须具有以像素为单位设置的宽度。 不要使用“自动”和“％”。 你会有很好的结果！ 问题是内联元素是滑动div。
但如果它们在px中有宽度，那么高度将是相同的。 尝试一下。
今天我遇到了这个问题。 我注意到，但是禁用所有的CSS解决了这个问题。 另外我知道它之前工作得很好，所以最近的变化一定是造成这个问题的原因。
事实certificate，我在CSS中使用转换来缓和进出徘徊 。
一旦这些转换从元素中删除，我添加了一切都很好。
所以，如果你有同样的问题，只需添加这些行到你添加的元素：
-webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none;
（我可能会滥用转换，不仅仅是将它们添加到我想要转换的元素，而是将它们用于整个网站。）
尝试从所有元素中删除所有CSS边距。 通常生涩animation来自animation框架没有考虑到的边缘。
我发现animate（）是最可靠的方法来animationjQuery（至less跨浏览器）的任何东西。
这将dynamic地将内容包装在div中，然后通过使用其内容的高度来animation该div包装的高度。
$('a').click(function(event) { event.preventDefault(); xToggleHeight($(this).next()); }); //For each collapsible element. $('.collapsible').each(function() { //Wrap a div around and set to hidden. $(this).wrap('<div style="height:0;overflow:hidden;visibility:hidden;"/>'); }); function xToggleHeight(el){ //Get the height of the content including any margins. var contentHeight = el.children('.collapsible').outerHeight(true); //If the element is currently expanded. if(el.hasClass("expanded")){ //Collapse el.removeClass("expanded") .stop().animate({height:0},5000, function(){ //on collapse complete //Set to hidden so content is invisible. $(this).css({'overflow':'hidden', 'visibility':'hidden'}); } ); }else{ //Expand el.addClass("expanded").css({'overflow':'', 'visibility':'visible'}) .stop().animate({height: contentHeight},5000, function(){ //on expanded complete //Set height to auto incase browser/content is resized afterwards. $(this).css('height',''); } ); } }
当你的情况下 父区div“.wrapper”有填充时，会发生“跳跃” 。
填充去的孩子div，而不是父母。 jQuery是animation高度不填充。
例：
<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>
希望这可以帮助。
您可以使用animate方法编写自定义animation。 这将让你绝对控制所有的细节。
我注意到，如果你的容器<div>之后有一个<br /> ，那么animation也会变得很麻烦。 删除这个解决了我的问题。
这里有很多build议，还有很多关于什么可行的build议。 对于我来说，行为问题是扩展容器的animation过度展开，然后弹回到正确的展开高度（全部作为一个animation的一部分完成）。 举例来说，animation最初会扩展到500px的高度，然后缩小到450px。 崩溃没有问题。
工作的解决scheme是添加到展开/折叠div，一个CSS：white-space：nowrap;
这很好地工作 – 顺利扩展到正确的高度。
CSS填充和jQuery的slideToggle不能很好地在一起工作。 尝试填充填充。
这个问题显然有很多不同的解决scheme – 根据你的布局，不同的解决scheme有不同的结果。
这是我的（剥离）
<div> <p>Text</p> </div> <div class="hidden"> <p></p> </div>
当我使用jQuery来显示<div class="hidden"> ， <p>元素上的边距会与上面的<p>元素的边距一起折叠。
我认为这是奇怪的，因为他们在不同的<divs> 。
我的解决scheme是消除<p>底部的边距。 在一边有一个边缘可以防止第一个<p>底部的边距与第二个<p>的顶部一起折叠。
这个解决方法解决了我的问题，可能可以应用于其他人，但可能并不适用于所有人。
您只需修改effects.js中的向上，向下效果，让它们考虑可能存在的边距或填充，然后调整他们认为是元素的总大小以适应这些值…沿着这些行….
Effect.BlindDown = function(element) { element = $(element); var elementDimensions = element.getDimensions(); //below* var paddingtop = parseInt(element.getStyle('padding-top')); var paddingbottom = parseInt(element.getStyle('padding-bottom')); var totalPadding = paddingtop + paddingbottom; if(totalPadding > 0) { elementDimensions.height = (elementDimensions.height - totalPadding); } //above* return new Effect.Scale(element, 100, Object.extend({ scaleContent: false, scaleX: false, scaleFrom: 0, scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}, restoreAfterFinish: true, afterSetup: function(effect) { effect.element.makeClipping().setStyle({height: '0px'}).show(); }, afterFinishInternal: function(effect) { effect.element.undoClipping(); } }, arguments[1] || { })); };
尝试将容器的'位置'属性（在本例中为.notice div）设置为'相对'。
为我工作。 来源： slideToggle高度是“跳跃”
问题是你正在执行对父项的操作，这样做会删除与该元素相关的CSS。
您需要在note1上运行幻灯片，而不是注释1的父项。
我有同样的问题，并通过降低一个水平来解决它。
你可能会尝试添加一个doctype，如果你没有一个，它在IE8上find了这个build议后，在IE8上工作： jQuery slideToggle跳转 。 他build议使用严格的DTD，但我只是使用了google.com使用的doctype： <!doctype html> ，它解决了我的问题。
我遇到同样的错误花了几天find解决办法。 问题是当元素被隐藏时，jquery得到错误的高度。 顶部修复它，你必须得到之前隐藏和使用自定义animation高度。 它的棘手去这里更好的解释
我的导航标签里有div的“jerkyness”，同样的问题 – 我的目标是显示hoverdiv的无序列表（如果存在的话）。 我的列表是dynamic创build的，所以它们没有固定的值。
inheritance人修复：
$("nav div").hover( function() { // ie onmouseover function /****simple lines to fix a % based height to a px based height****/ var h = jQuery(this).find("ul").height(); //find the height jQuery(this).find("ul").css("height", h); //set the css height value to this fixed value /*****************************************************************/ jQuery(this).find("ul").slideDown("500"); }, function(){ // ie onmouseout function jQuery(this).find("ul").slideUp("500"); }); });
今天就遇到这个问题，看到了这个问题，根据我在这里看到的，开始修补。 我通过删除包含div的CSS的相对位置来解决我们的跳跃问题。 之后再也不会有怪事了。 我的2美分。
确保你没有设置全局的CSS转换规则，或者你的容器或任何包含的元素。 这也会造成匆忙。
在我的情况下，我解决了它添加style="white-space:nowrap;" 到元素来防止对jQuery函数的错误计算; 除非需要包装，否则不需要设置固定的宽度。
我正在使用像这样的slideDown()
$('#content').hide().delay(500).slideDown(500);
对我来说，这是主要容器#content元素。 我正在隐藏它，然后调用slideDown() 。 我删除了在CSS中的padding属性，一切工作正常后。 它通常是一个边距，填充或％宽度，所以最简单的方法是注释每个属性并逐个testing它们以获得结果。
我有同样的问题，但没有一个build议的解决scheme为我工作，所以我提出一个解决scheme，完全消除依赖slideToggle() 。
Spark注意事项 ：正常加载页面，收集每个要切换的元素的高度，将该高度存储在特定的数据属性中，然后折叠每个元素。 然后，就像在元素的data-height属性（展开的）和零（折叠）之间更改max-height一样简单。 如果你想添加额外的填充和边距等元素，我build议将它们存储在一个单独的CSS类中，使用max-height属性进行添加和删除。
将jQuery放置在要切换的元素之后，并允许它们在页面加载期间执行（因此您不必看着它们全部加载，然后折叠）。
HTML
<ul id="foo"> <li> <h2>Click Me 1</h2> <div class="bar">Content To Toggle Here 1</div> </li> <li> <h2>Click Me 2</h2> <div class="bar">Content To Toggle Here 2</div> </li> </ul>
CSS
#foo>li>div.bar {transition: all 0.5s; overflow: hidden;}
jQuery的
$('#foo h2').each(function(){ var bar = $(this).siblings('.bar'); bar.attr('data-height', bar.height()); //figure out the height first bar.css('max-height', '0px'); //then close vertically }); $('#foo h2').click(function(){ var bar = $(this).siblings('.bar'); if ( bar .css('max-height') == '0px' ){ //if closed (then open) bar.css('max-height', bar.data('height') + 'px'); } else { //must be open (so close) bar.css('max-height', '0px'); } });
这是一个工作的JSFiddle ： http : //jsfiddle.net/baacke/9WtvU/
我遇到过同样的问题。 我通过添加这个来修复它：
.delay(100)
猜猜给它更多的时间来思考帮助它？
我刚刚了解到，如果在展开/折叠元素中存在浮动元素，也会出现此问题。 在这种情况下，在animation元素的末尾（仍然在内）的clearfix（clear：both;）可以摆脱它。
添加我的解决scheme：原来我的问题是flexbox（只在铬）。 我已经align-items: baseline; 在父元素上设置。 设置align-self: center; 到我的幻灯片切换全宽子元素，它清除它的权利。 大量使用两个小时。
我通过设置来解决它：
box-sizing: content-box;
对我来说，从我的容器中删除最小高度解决了这个问题。
对我来说，解决scheme是，我有一个CSS样式定义如下：
* { transition: all .3s; }
去除这是解决scheme！
