jquery hide div

时间:2010-07-08 14:21:13

标签: jquery ajax

我希望有人可以帮助我。我发现这个jquery脚本使用ajax

将内容加载到一个节奏中
$(document).ready(function(){
    //References
    var sections = $("#menu li");
    var loading = $("#loading");
    var content = $("#content");

    //Manage click events
    sections.click(function(){
        //show the loading bar
        showLoading();
        //load selected section
        switch(this.id){
            case "home":
                content.slideUp();
                content.load("/includes/content.asp", hideLoading);
                content.slideDown();
                break;
            //case "news":
            //  content.slideUp();
            //  content.load("sections.html #section_news", hideLoading);
            //  content.slideDown();
            //  break;
            case "interviews":
            content.slideUp();
            content.load("/includes/test1.asp", hideLoading);
            content.slideDown();
            break;
            case "external":
                content.slideUp();
                content.load("/includes/test.asp", hideLoading);
                content.slideDown();
                break;
            default:
                //hide loading bar if there is no selected section
                hideLoading();
                break;
        }
    });

    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
    }
    //hide loading bar
    function hideLoading(){
        loading.fadeTo(1000, 0);
    };
});

这行代码在主页上

    <div id="loading">
  <div align="center"><img src="/css/images/loading.gif" alt="Loading" /></div>
</div>

我需要在我的页面加载时隐藏加载图像(隐藏DIV ID =“加载”),当页面加载时它不会隐藏,当我点击链接将内容加载到我的页面时,div是把我的内容放下来......

关于如何在加载div完成时隐藏div的任何想法?

由于

3 个答案:

答案 0 :(得分:1)

你只需要打电话:

$("#loading").hide();

$(document).ready

上拨打此电话

答案 1 :(得分:1)

$(document).ready(function(){
    //References
    var sections = $("#menu li");
    var loading = $("#loading").hide();  // Hide the loading image on page load
    var content = $("#content");

而不是使用.fadeTo()使用.fadeOut(),以便在动画结束时隐藏您的加载图片。

function hideLoading(){
    loading.fadeOut(1000);
};

此外,对showLoading()的改进可能是:

function showLoading(){
    loading.show();
      // or if you want it animated
      // loading.fadeIn(200);
}

答案 2 :(得分:1)

您可能需要尝试以下操作:

$(document).ready(function(){
   $('#loading').css('display','none'); /*If you want the div to appear as if it never existed*/
   $('#loading').css('visibility','hidden'); /*If you want the div to be 'hidden' but keep the space that it occupies.*/
});