jQuery slideToggle只显示和隐藏但没有正确动画 [英] jQuery slideToggle just shows and hides but doesn't animate correctly
问题描述
在此示例中，我的div容器只是隐藏并显示但不执行令人敬畏的jQuery动画。
In this example my div container just hides and shows but doesn't do the awesome jQuery animation.
$('.button').click(function() {
$('.class1').slideToggle();
});
有谁能说我为什么？我知道桌子上的动画不能正常工作，但在div上它应该没问题。
Can anybody say me why? I know that animations on tables don't work correctly but on divs it should be okay.
UPDATE
感谢所有的答案。我缺少的信息是position绝对从DOM中删除元素。是的，我知道我应该把风格放在一个CSS中 - 这个版本只是为了快速测试，但感谢答案！
UPDATE Thanks for all the answers. The information I was missing is that position absolute removes the element from the DOM. And yeah I know I should put the style in a css--this version was just for quick testing, but thanks for the answers!!!
推荐答案
.slideToggle（）将元素的高度从0％ - 100％设置为动画，隐藏其子元素。
.slideToggle() animates the height of an element from 0% - 100%, hiding its children as it goes.
通过使用position：absolute always你的小提琴，你正在从DOM流中删除子元素，并干扰父元素逐步隐藏其子元素的能力。
By using position:absolute throughout your fiddle, you are removing the child elements from the flow of the DOM and interfering with the ability of the parent element to incrementally hide its children.
如果你设置溢出到隐藏，并删除位置：绝对的孩子，这是正常的。
If you set overflow to hidden, and remove position:absolute from the children, this works properly.
这篇关于jQuery slideToggle只显示和隐藏但没有正确动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
