Question

我有一个jQuery脚本使它显示Please Wait，持续3秒，然后显示DIV。现在我遇到的问题是，当我显示时：无;它导致我的其他div的宽度和高度扭曲。在函数中是否有另一种隐藏div的方法可能不会中断？

jQuery使用

setTimeout(function(){
    $("#loading").hide(100); //100 = animation speed in miliseconds
    $("#quickstats").show(100);
}, 3000); //3000 miliseconds = 3 seconds

Answer 1

您可以使用visibilty代替display css属性。否则你会想要以不同的方式去做。根据您的页面布局，有多种选择。

visibility:hidden;
visibility:visible;

您也可以将计时器包装在另一个元素中并隐藏它。在这种情况下，我在计时器周围添加了一个范围。然后，您可以在选择器中使用直接后代选择器>进行隐藏。

<div id="loading"><span>Timer</span></div>

setTimeout(function(){
    $("#loading > span").hide(100); //100 = animation speed in miliseconds
    $("#quickstats").show(100);
}, 3000); //3000 miliseconds = 3 seconds

Answer 2

假设#loading DIV和#quickstats DIV具有相同的宽度，您可以尝试：

setTimeout(function(){
    $("#loading").animate({opacity: 0}, 100, function() {
        $(this).hide();
        $("#quickstats").css({opacity: 0}).show().animate({opacity: 1}, 100);
    });
}, 3000);

演示： http://jsfiddle.net/XUSM2/

演示（在页面加载时）： http://jsfiddle.net/XUSM2/1/

显示：无;导致宽度问题

2 个答案: