jquery隐藏div答案

【问题标题】：jquery hide divjquery隐藏div
【发布时间】：2010-07-08 14:21:13
【问题描述】：

我希望有人可以帮助我。我发现这个 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="loading"）它不会在页面加载时隐藏，当我单击链接以将内容加载到我的页面时，div 是那里将我的内容向下移动...

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

谢谢

【问题讨论】：

标签： jquery ajax

【解决方案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);
}

【讨论】：

嗨，帕特里克 - 感谢您的反馈，它解决了 50% 的问题，当页面加载时，它现在隐藏加载时的图像，但 div 仍然在那里将我的内容向下移动......
@Gerald - 嗨。我刚刚更新了我的答案。 :o) 使用fadeOut() 而不是fadeTo()。实际上，您可以通过类似的方式改进showLoading() 功能。我会更新的。
感谢 Patrick，我已经应用了您建议的解决方案，并且 100% 有效 - 非常感谢！

【解决方案2】：

你只需要打电话：

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

致电$(document).ready

【讨论】：

【解决方案3】：

您可能想尝试以下方法：

$(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.*/
});

【讨论】：