Question

我的jQuery slideToggle()实验

当我打开盒子时，有人可以告诉我为什么我的盒子会“跳”吗？上半场他们滑了，剩下的他们“跳”了？

谢谢， 约翰内斯

Answer 1

这是一个简单的修复。将此CSS规则添加到您的样式表（在Firebug中测试工作，并根据我以前对此问题的经验，这是修复）：

ol.message_list { position: relative }

这是一个CSS错误，本身不是jQuery错误。

Answer 2

对我有什么帮助

overflow: hidden

到那个切换......

Answer 3

您案件中最快的解决方法：

.message_container { width: 361px; }

我不确定为什么，但是当包含<p>导致问题时没有给容器一个固定的宽度导致问题，给它一个并且跳跃性消失。

Answer 4

css padding和jquery slideToggle不能很好地协同工作。尝试填充填充。

Answer 5

我在很多场合都发现了这个问题，我用slideToggle设置了高度，但没有设置边距/填充。

所以，这样的事情可能会解决它：

$("#thediv").slideToggle().animate({"margin-bottom": "toggle"});

Answer 6

如果设置，min-height属性也可以触发这样的故障。在这种情况下，您需要重置它：

.toggle-container {
position: relative;
min-height: 0;
}

Answer 7

我认为最容易使用的解决方案是将自定义函数添加到jQuery，并使用动画填充/ margin-top / bottom。

//this function is to avoid slideToggle jQuery jump bug.
$.fn.slideShow = function(time,easing) { return $(this).animate({height:'show','margin-top':'show','margin-bottom':'show','padding-top':'show','padding-bottom':'show',opacity:1},time,easing); }
$.fn.slideHide = function(time,easing) {return $(this).animate({height:'hide','margin-top':'hide','margin-bottom':'hide','padding-top':'hide','padding-bottom':'hide',opacity:0},time,easing);  }

和用例：

$(this).slideShow(320,'easeOutQuart');
$(this).slideHide(320,'easeOutQuart');

我的示例动画不透明切换图片，您可以根据需要进行修改。

Answer 8

我发现最简单的修复方法通常是从滑动的元素中删除填充，并将填充添加到内部滑动元素中。

在此示例中，属性为data-role="content"的div是滑动的div，填充应用于tab-example__content

<div data-role="content" class="tab-example__content">
    ...
</div>

为了修复'生涩'滑动，我在滑动元素中添加了一个新的div，并将类/ padding移动到那个，就像这样：

<div data-role="content">
    <div class="tab-example__content">
        ...
    </div>
</div>

现在很好，很顺利

Answer 9

如果默认情况下切换框没有高度，则需要添加它，对于自动高度，请添加以下内容：

.toggle-container {
 height: auto;
}

Answer 10

我发现在切换后的容器上设置宽度可以为我解决问题

.toggle-container { 
   width: 100%; }
}

我阅读了slideToggle依赖于开始的宽度和高度才能正确运行，因此根据您的页面，您可能需要设置宽度或高度才能获得预期的行为。

Answer 11

在过去的情况下，我遇到了同样的问题，问题是我的CSS中有#load data d <-read.csv("companyNamesTest.csv") c <- as.character(d$Name) # Function for getting website. getWebsite <- function(name) { url = URLencode(paste0("https://www.bing.com/search?q=",name)) page <- read_html(url) results <- page %>% html_nodes(xpath = ".b_adSlug") %>% html_text() result <- results[1] return(as.character(results)) # Return results if you want to see them all. } websites = character(length(c)) pb = txtProgressBar(min = 1, max = length(c), initial = 1, style = 3) for(j in 1:length(c)){ setTxtProgressBar(pb, j) Sys.sleep(sample(12, 1)) websites[j] = getWebsite(c[j]) } df = data.frame(CompanyName = c, Website = websites)声明与transition: all 350ms;冲突。删除该问题对我来说是固定的，因此请查找CSS中的过渡。

Answer 12

我不知道这是否仍然是一个问题，但是对我来说，解决此问题的原因是我以前使用CSS对其进行“动画处理”，因此对元素产生了transition效果。删除它会为我修复。

slideToggle高度是“跳跃”

12 个答案: