Анимировать div по клику, загрузить содержимое в div

Я использую следующий 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>

Спасибо за любую помощь!

РЕДАКТИРОВАТЬ

Спасибо за все предложения. Я пробовал каждый из них, и до сих пор не повезло. Должно быть, я упускаю что-то очень простое, но я просто не вижу банкомата.


html jquery dynamic-content
person stupendousman    schedule 19.06.2013    source источник
comment
Вы проверяли пути к файлам, имена файлов (дело и т.д.). В качестве примечания вам нужна только одна функция готовности документа.   -  person adeneo    schedule 19.06.2013
comment
Привет Аденео, спасибо за предложение! Я продолжаю проверять это снова и снова, но все равно не везет. Кроме того, FWIW, если я удалю preventDefault, я попаду на правильные страницы.   -  person stupendousman    schedule 19.06.2013

Ответы (2)


arrow_upward
0
arrow_downward

linkLocation location — это переменная, а не строка, поэтому ее не следует заключать в "".

$(document).ready(function() {

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

});
person Arun P Johny    schedule 19.06.2013
comment
Разве this.href не должно быть this.attr('href')? И все это можно упаковать в одну функцию готовности документа. - person rogMaHall; 19.06.2013
comment
@rogMaHall оба будут работать, this.href будет читать свойство href элемента this dom. попробуйте jsfiddle.net/arunpjohny/J4E4c/1 - person Arun P Johny; 19.06.2013
comment
Вы правы, однако this.href получит полный целевой URL, а this.attr('href') вернет только то, что написано в разметке. Вот хороший поток SO на нем - this.href vs $(this).attr('href' ). Не уверен, что у OP есть предпочтения, но полезно знать :) - person rogMaHall; 19.06.2013
comment
Спасибо! Все равно не повезло. Должно быть что-то глупое, чего мне не хватает в моем расширенном коде. - person stupendousman; 19.06.2013
comment
Вы уверены, что обработчик кликов вызывается? - person Arun P Johny; 19.06.2013
comment
Я почти уверен, что это так. Постепенное исчезновение и исчезновение происходит соответствующим образом в выбранном div, в него просто не загружается контент. - person stupendousman; 19.06.2013
comment
проверьте вкладку сети инструментов разработчика браузера, чтобы увидеть, есть ли какая-либо ошибка - person Arun P Johny; 19.06.2013
comment
Ах! Спасибо! Не думал об этом. Похоже на проблему с Хромом. ссылка Открыл в Safari, работает Как колдовство! Спасибо! - person stupendousman; 19.06.2013

arrow_upward
0
arrow_downward

для достижения наилучших результатов вы должны связать вызовы, чтобы убедиться, что один из них завершен до того, как сработает другой:

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

и да, исправьте проблему с атрибутом ссылки, как советовали выше.

person codetantrik    schedule 19.06.2013
comment
Хорошая мысль о цепочке вызовов. Я буду иметь это в виду для этого. Я попробовал это, но все еще не повезло. Также попробовал предложение ссылки attr, и не повезло. - person stupendousman; 19.06.2013