Содержимое jQuery не исчезает во время успеха .load ()

Question

Я пробирался через несколько подобных проблем, но ни одна, кажется, не работала. Я пытаюсь использовать событие нажатия jQuery для fadeOut () целевого div, асинхронно загружает () содержимое целевого div из href выбранного элемента, а затем fadeIn () новое содержимое.

Сайт, о котором идет речь http://clients.weareno1.com/worklocal.org/.

Мой код выглядит следующим образом:

$(document).ready(function() {
    $("#pri_nav a").click(function() {
        $("#content").fadeOut(400, "linear").load(this.href, function() {
            $("#content").fadeIn(800, "linear");
        });
    });
});

Установка передачи 'e' в функцию щелчка (т. Е. $("#pri_nav a").click(function(e) {e.preventDefault(); [....] дает мне большую часть пути, но затем мне остается вручную удалить и заменить «выбранный» класс из родительского якоря li. В худшем случае, это то, что я сделаю, но это кажется немного излишне сложным.

Любой вклад будет наиболее ценным.

Заранее спасибо за ваше время.

Answer 1

Вы упоминаете в своих комментариях о достижениях SEO. Поисковые системы не выполняют код JavaScript. Пока ваше приложение работает с отключенным JavaScript, поисковые системы (и люди с необходимостью доступности) смогут переходить по ссылкам.

Методы fade* не являются синхронными. Я бы не стал так цеплять нагрузку.

$(document).ready(function() {
    $("#pri_nav a").click(function() {
        var a = this;
        $("#content").fadeOut(400, "linear", function() {
            $("#content").load(a.href, function() {
                $("#content").fadeIn(800, "linear");
            });
        });
        return false;  // or prevent default
    });
});