jQuery动画没有动画

Question

我正在使用jquery animate函数在加载时从左上角扩展网站的网站上工作。 我实际上不是为该功能编写代码的人，因此我对此不太熟悉。 它确实在某一时刻起作用，但目前看来似乎根本没有起作用。 我知道.js文件正在加载并正在运行，因为其中的代码的第一位是显示“页面正在加载”消息的时间延迟。 但这只是显示已经加载的页面，而不是动画从左上方出现的页面并向内滑动。我包括了CSS并进行了标记，尽管我不认为这是问题所在。 任何帮助，将不胜感激！ 谢谢！

注意：我们使用的是Jquery 1.7.2版

CSS：

 #builder
    {
        position:relative;
        min-height:100%;
        min-width:100%;
        z-index:999;
    }

JavaScript：

function hideIt() {

    document.getElementById("wait").style.display = "none";

}

setTimeout("hideIt()", 1000);

function showIt() {

    document.getElementById("builder").style.display = "block";
}

setTimeout("showIt()", 2500);

function build() {
    $(document).ready(function () {

        $("#builder").animate({ height: '0%', width: '0%' }, 1);
        $("#builder").animate({ height: '100%', width: '100%' }, 2000);


    });
}

标记：

<body onLoad="build()">
<img src="wait.gif" id="wait" style="display:block;" />

wait.gif只是一张图片，上面写着“页面正在加载” ...

该页面包含以下内容：

<div id="builder" align=center style="display:none;">

Answer 1

如果#builder元素在显示之前被隐藏2.5秒，则动画将在显示该元素时完成。 删除正文onLoad上的内联函数，然后尝试：

function hideIt() {
    $("#wait").hide();
}

function showIt() {
    $("#builder").show(2000); //should do somewhat the same as animating from the top left
}

$(function() {
    setTimeout(hideIt, 1000); //no need to quote the functions and eval them
    setTimeout(showIt, 2500);
});

要不就

$("#wait").delay(1000).hide(10);
$("#builder").delay(2500).show(2000)

Answer 2

尝试像这样调整代码：

$(document).ready(function() {
    $('#wait').hide(1000, function(){  // hide the #wait
        $("#builder").show().animate({ // then show, then animate #builder
            height: '100%',
            width: '100%'
        }, 2000);
    });
});

注意：请记住，当您使用百分比和包含#builder的元素时，还需要设置其高度和宽度。

Answer 3

它很可能在调用show()之前就已经过动画处理。 因此，在其显示时，动画就完成了。

jQuery动画没有动画

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-07-03 01:02:55

解决方案2
0 2012-07-03 00:52:24

解决方案3
0

jQuery动画没有动画

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-07-03 01:02:55

解决方案2 0 2012-07-03 00:52:24

解决方案3 0

解决方案1
1 已采纳 2012-07-03 01:02:55

解决方案2
0 2012-07-03 00:52:24

解决方案3
0