jquery - 使用 jQuery 从数据库加载内容，然后淡入

Question

我从 MySQL 数据库中获取内容并将其输出到#content div.

我希望该 div 默认不可见，并在内容加载后平滑显示。

我知道这非常容易，但对于我的生活，我不记得该怎么做。

Answer 1

在 JQuery 中，您可以添加

$(document).ready(function()  {
    $('div#id_of_div').html("<?php $content; ?>");
});

但是有很多方法可以显示内容，你可以使用fadeIn("slow")。生效。

您还可以在ready函数内部使用 ajax。这完全取决于您以及您希望获取数据的方式。

Answer 2

通过 ajax 加载您的内容......（url-to-your-result-stuff）......而不是在接收数据后淡入

jQuery(function(){
    jQuery('your-div-selector')
        .hide()
        .load(
            'url-to-your-result-stuff',
            {},
            function() {
                jQuery(this).fadeIn();
            });
    }); 

Answer 3

如果您想要平滑过渡，请使用带有visiblityandopacity属性的“隐藏”类而不是display属性，否则该元素在隐藏时不会成为文档常规流程的一部分并且可能会闪烁。该visibility属性是为了支持不知道opacity. 首先在您的 HTML 上添加类，然后添加 CSS：

div.hidden {
  visibility: hidden;
  opacity: 0;
}

然后您可以在加载内容时使用回调再次显示 div：

$('#content').load('contents.php', function() {
  $(this).css('visibility', 'visible').fadeTo('fast', 1);
});