jquery - 显示：无；导致宽度问题

Question

我有一个 jQuery 脚本，它可以显示请等待 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而不是displaycss 属性。否则你会想以不同的方式去做。根据您的页面布局，有几个选项。

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/