jquery - 幻灯片(动画)不工作

Question

我有一个带有个人资料小按钮(不止 2 个)的页面。除了隐藏和显示 (slideToggle) - 我的 div (profilePannel) 似乎没有很好的缓慢扩展，一切都或多或少地工作正常，只是突然。

只有 css 元素 (margin-bottom) 工作正常。要查看它，您可以单击配置文件一，然后在第二个按钮上查看最终效果。

jQuery

var menu;
$(document).ready(function(){
    $('.img').click(function () {
        menu = $("#" + $(this).data("menu"));
        $(".profilePannel:not(#" + menu.attr("id") + ")").slideUp("slow");
        menu.slideToggle("slow");
    });
})

Try it!

谁能这么好，告诉我为什么，我该如何改变它？

顺便说一句，我在定位我的 profilePanel 时遇到了麻烦 - 我希望在每个配置文件按钮下方显示它，而不移动其余按钮。我尝试过使用 position: relative、absolute 和 z-index，但我遗漏了一些东西并且没有我想要的输出。

Answer 1

这似乎是您的 min-height 导致了您的问题。如果你删除/更改它，你会得到你想要的效果:

.profilePannel {
    width: 300px;
    height: 150px;
    border: 1px solid #000;
    background: silver;
    filter:alpha(opacity=75);
    opacity: 0.75;
    -moz-opacity:0.75;
    position: relative;
    z-index: 2;
    display: none;
    margin-bottom: 15px;
}

还有，你可以写得更好

$(".profilePannel:not(#" + menu.attr("id") + ")").slideUp("slow");

作为:

$(".profilePannel").not(menu).slideUp("slow");

JSFiddle

如果你真的想使用 min-height 你需要想出一个替代方案 - 或者只是把它放在一个容器中并设置 min-height对此:

JSFiddle