Question

单击按钮时，我的代码出现<li> slideDown时遇到了一些问题。我试图制作一个jsFiddle但由于某种原因CSS没有显示。但here确实如此。

我有一个网站，中心什么都没有。双方都有导航栏，现在它只有左侧有任何东西。它有一个<div>，其中有一个<ul>，每个<li>的右边都有一个小的展开按钮，当点击它时（只有一个除了“什么是这个？“），在”这是什么“之外，然后一个小的隐藏文本slideDown(500)和扩展img变为合同img。如果点击了合同img，那么它应该slideUp(500)，但由于某种原因，它会直接弹回隐藏而不执行slideUp(500)。

Answer 1

jQuery动画是异步的。当你调用.slideUp()时，它会触发一个开始单步执行动画的计时器，并立即返回控件（这样浏览器就不会锁定，直到动画完成 - 因为JavaScript是单线程的）。因此，如果您希望在动画完成后发生某些事情，则将该函数（称为回调）作为.slideUp()的第二个参数传递。例如：

$("#whatRolldown").slideUp(500, function() { $(this).css("display", "none"); })

}）;

您在slideDown()上没有注意到的原因是slideDown()已将元素的CSS display设置为none以外的其他内容，以确保在动画期间显示该元素。所以你的.css("display", "inline")在这种情况下确实没有做任何事情。

另外，由于margin-top:-155px元素上有.bar，因此您没有看到小提琴的输出。

Answer 2

它需要一些工作，但我更新了您的示例以解决您的主要问题。

$(document).ready(function() {
    $("#whatExpand").click(function () {
        $("#whatExpand").hide();
        $("#whatContract").show();
        $("#whatRolldown").slideDown(500);
        //$("#whatRolldown").css("display, inline");
    });

    $("#whatContract").click(function () {
        $("#whatContract").hide();
        $("#whatExpand").show();
        $("#whatRolldown").slideUp(500);
        //$("#whatRolldown").css("display", "none");
    });
});

http://jsfiddle.net/26gPJ/5/

JQuery处理所有花哨的东西，所以不要担心为隐藏的内容设置显示值。

li slideDown有效，但是当slideUp弹出时它不会滑动

2 个答案: