Question

所以我有3个div，点击时可以打开和关闭动画。我想让它同时打开点击的div，同时保持其他两个关闭。如果单击另一个，它将打开该一个，同时将其他一个关闭到其原始大小。

现在我的功能大部分都在使用。它们正确地打开和关闭，当它们是100乘100时，图像在点击时消失，这很好。但是，有时图像不会被隐藏，看起来非常粗糙。我似乎无法弄清楚为什么会发生这种情况。它就像它跳过hide（）并直接进入动画。没有任何骚扰错误，所以我有点难过。救命？这是代码片段。此外，链接到它混乱时的样子。

链接：http://i.imgur.com/eJ2QdiI.png

代码:(这是草稿，所以很好:)。这是我第一次为了娱乐而在工作环境中编写代码，所以任何提示也都有帮助！）

忍者编辑：我都试过延迟（）而没有延迟（）到极端，似乎根本没有帮助。：（

        function openDiv(divPosition) {
            if(divPosition == "top") {
                $("#home, #midDivContent, #botDivContent").hide().delay(1000);
                $("#topDiv").animate({"height": "500px", "width": "950px"}, "slow");
                $("#midDiv").animate({"height": "100px", "width": "100px"}, "slow");
                $("#botDiv").animate({"height": "100px", "width": "100px"}, "slow", function() {$("#contactMe, #aboutMe").show();$("#topDivContent").fadeIn("fast");});
            } else if (divPosition == "mid") {
                $("#aboutMe, #topDivContent, #botDivContent").hide().delay(1000);
                $("#midDiv").animate({"height": "500px", "width": "950px"}, "slow");
                $("#topDiv").animate({"height": "100px", "width": "100px"}, "slow");
                $("#botDiv").animate({"height": "100px", "width": "100px"}, "slow",function() { $("#home, #contactMe").show();$("#midDivContent").fadeIn("fast");});
            } else if (divPosition == "bot") {
                $("#contactMe, #topDivContent, #midDivContent").hide().delay(1000);
                $("#botDiv").animate({"height": "500px", "width": "950px"}, "slow");
                $("#topDiv").animate({"height": "100px", "width": "100px"}, "slow");
                $("#midDiv").animate({"height": "100px", "width": "100px"}, "slow",function() { $("#home,#aboutMe").show();$("#botDivContent").fadeIn("fast");});
            }
        }

Answer 1

为了延迟动画，你需要在那个特定元素上延迟它。

您的代码$("#home, #midDivContent, #botDivContent").hide().delay(1000)没有任何延迟，因为它已经隐藏了选择器中的元素。

或者，如果你做了$("#home, #midDivContent, #botDivContent").delay(1000).hide();，它会在隐藏这三个div之前等效1秒钟。你想要的是延迟下一组元素的动画，所以这样做：

$("#topDiv").delay(1000).animate({"height": "500px", "width": "950px"}, "slow");

依此类推，对于你希望延迟的每个动画。

另外值得注意的是，您可以使用回调。您希望在另一个元素完成动画后执行的动画可以放在初始元素动画函数的回调中。

$("#home, #midDivContent, #botDivContent").delay(1000).hide(function(){
    $("#topDiv").animate({"height": "500px", "width": "950px"}, "slow");
});

特别是，我建议$("#topDiv").delay(1000)...或指定hide的时间：.hide(500, function()...，因为传递hide()没有int使其瞬间完成。

JQuery在电话中跳过.hide（）

1 个答案: