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

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

linkLocationlocation 是一个变量而不是字符串，因此不应包含在""

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

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