Question

在this example我的div容器中隐藏并显示但不执行awesome jQuery animation。

$('.button').click(function() {
    $('.class1').slideToggle();
});

有人能说我为什么吗？我知道表上的动画不能正常工作，但在div上它应该没问题。

UPDATE 感谢所有的答案。我缺少的信息是position绝对从DOM中删除元素。是的，我知道我应该把风格放在一个CSS中 - 这个版本只是为了快速测试，但感谢答案！

Answer 1

.slideToggle（）将元素的高度从0％ - 100％设置为动画，隐藏其子元素。

通过在整个小提琴中使用position：absolute，您将从DOM流中移除子元素，并干扰父元素逐步隐藏其子元素的能力。

如果将overflow设置为hidden，并从子项中删除position：absolute，则此方法可以正常工作。

http://jsfiddle.net/7xzMa/6/

Answer 2

更新了您的FIDDLE - http://jsfiddle.net/7xzMa/14/ ---清除了div，您应该将css放入样式表中，以便更容易编辑。 “display”应设置为“none”。除非您希望它可见，然后单击隐藏。 http://jsfiddle.net/7xzMa/8/

Answer 3

Artur，我的建议是完全重构您的代码，有太多的事情要继续下去。简短而简单总是最好的。我首先要删除你的html中的“style”属性。确保将样式放在CSS中（它更清晰，更易于维护 - 比从多个标签中删除样式要好得多）。

我刚给你做了一个演示，希望它有所帮助！随意使用它！快乐的编码！ http://jsfiddle.net/7xzMa/17/

Answer 4

使用JQuery UI

$(document).ready(function() {
    $('.button').click(function() {
        $('.class1').toggle('slide',{direction: 'up'},500);
    });
});

jQuery slideToggle只显示和隐藏但没有正确动画

4 个答案: