Question

我正在使用以下jQuery尝试淡出div，加载HTML页面，然后淡入。淡入淡出正在工作，但它似乎没有加载HTML，我不是很确定我错过了什么。第一个功能是尝试在最初访问网站时将我的第一页加载到div中。

的jQuery

$(document).ready(function() {

    $("#Content").load("Landing.html");

});

$(document).ready(function() {

    $("a").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#Content").fadeOut(500);  
        $("#Content").load("linkLocation"); 
        $("#Content").fadeIn(500); 
    });

});

HTML的基本理念

<ul>
        <li>
          <a href="Contact.html">contact</a>
       </li>  

       <li>
          <a href="Portfolio.html">portfolio</a>
       </li>

        <li>
          <a href="Services.html">services</a> 
        </li> 

       <li>
          <a href="About.html">about</a>
       </li>

       <li>
          <a href="Landing.html">home</a>
       </li>      
     </ul>

<div id="Content"></div>

感谢您的帮助！

修改

感谢所有建议。我已经试过了每一个，但仍然没有运气。我必须遗漏一些非常简单的东西，但我只是看不到ATM。

Answer 1

linkLocation location是一个不是字符串的变量，因此不应该包含在""

中

$(document).ready(function() {

    $("a").click(function(event){
        event.preventDefault();
        var linkLocation = this.href;
        $("#Content").fadeOut(500);  
        $("#Content").load(linkLocation ); 
        $("#Content").fadeIn(500); 
    });

});

Answer 2

为了获得最佳效果，您应该将调用链接起来以确保在另一个调用之前完成调用：

  $("#Content").fadeOut(500, function () {
        $("#Content").load(linkLocation, function () {
            $("#Content").fadeIn(500)
        });
    });

是的，按照上面的建议修复链接attr问题。

单击动画div，将内容加载到div中

2 个答案: