0

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

现在我的功能大部分都在工作。它们可以正确打开和关闭，当图像为 100 x 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");});
            }
        }
4

1 回答 1

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(500, function()...因为没有 int 的传递hide()使其瞬间完成。

于 2013-03-26T04:59:29.240 回答