2

在这个例子中，我的 div 容器只是隐藏和显示，但没有做很棒的 jQuery 动画。

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

谁能告诉我为什么？我知道表格上的动画不能正常工作，但在 div 上应该没问题。

更新感谢所有答案。我缺少的信息是绝对位置会从 DOM 中删除元素。是的，我知道我应该把样式放在 css 中——这个版本只是为了快速测试，但谢谢你的回答！！！

4

4 回答 4

7

.slideToggle() 将元素的高度设置为 0% - 100%，同时隐藏其子元素。

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

如果您将溢出设置为隐藏，并从孩子中删除位置：绝对，这将正常工作。

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

于 2012-08-06T22:36:44.853 回答
1

更新了您的FIDDLE - http://jsfiddle.net/7xzMa/14/ --- 清理了 div，您应该将 css 放入样式表中，以便于编辑。“显示”应设置为“无”。除非您希望它可见，否则单击隐藏。http://jsfiddle.net/7xzMa/8/

于 2012-08-06T22:41:19.913 回答
1

Artur，我的建议是完全重构你的代码，这有太多的事情要做。简短而简单总是最好的。我首先要摆脱 html 中的“样式”属性。确保将样式放在 CSS 中（它更干净、更易于维护——比从多个标签中删除样式要好得多）。

刚刚给你做了个demo，希望对你有帮助！随意使用它！快乐编码！http://jsfiddle.net/7xzMa/17/

于 2012-08-06T23:22:07.320 回答
0

使用 JQuery 用户界面

$(document).ready(function() {
    $('.button').click(function() {
        $('.class1').toggle('slide',{direction: 'up'},500);
    });
});
于 2015-02-15T22:52:19.550 回答