Question

我有一个显示加载图片的js脚本，而不是将内容加载到#content div。它工作正常，但我无法弄清楚如何制作它一旦加载就会淡化内容？

function viewHome(){
    $('#woodheader').load("inc/home.php");
    $('#content').html('<span class="loader">Loading..&nbsp;&nbsp;&nbsp;<img class="loaderimg" src="images/ajax_loader.gif"/></span>').load("inc/home.php");
}

例如，当.load("inc/home.php");完成时，我想淡入 inc / home.php 文件的内容，持续时间为3秒。我该怎么办？

Answer 1

function viewHome() {
    $('#woodheader').load("inc/home.php");
    var content = $('#content');
    content.html('<span class="loader">Loading..&nbsp;&nbsp;&nbsp;" +
        "<img class="loaderimg" src="images/ajax_loader.gif"/></span>');
    content.load("inc/home.php", function () {
        content.hide().fadeIn(3000);
    });
}

Answer 2

使用不透明度：0来自css（和过滤器：alpha（opacity = 0）表示ie）到#content

然后将$（“＃content”）。fadeIn（持续时间）添加到您的函数

Answer 3

使用jquery将您的代码放入此

$(document).ready(function() {
    // put jquery fade call in here
});

使用jquery函数

$("#element").fadeIn(350);

如何在以下js脚本中添加淡入效果？

3 个答案: