Как выполнить.click() после завершения анимации jQuery?

Question

Я хочу сдвинуть вверх один div после нажатия на ссылку, затем слайд Down другого div, а затем перейти на следующую страницу.
Проблема: новая страница загружается до окончания анимации.
Вопрос: Как я могу это сделать?
Должен ли я использовать protectDefault, а затем каким-то образом возобновить его?

Это URL: http://www.jolandaschouten.nl/wordpress

Это код, который теперь реализован только для первого пункта меню:

jQuery(document).ready(function($){

    var allDivs = $("#introductie").add("#agenda").add("#werk").add("#onderwijs-organisatie").add("#publicaties").add("#links").add("#contact");

    console.log(allDivs);

    $("li.page-item-11 a").click(slideUp);

    function slideUp(){
        allDivs.slideUp(500, slideDown);        
    }
    function slideDown(){            
        $("#introductie").slideDown(500);
    }
});

PS: я не хочу использовать AJAX из-за проблем с SEO и браузерной навигацией. Клик должен действительно привести к переходу на следующую страницу.

Answer 1

Вернуть false чтобы предотвратить действие по умолчанию (по ссылке), используйте замыкания, чтобы зафиксировать элемент, на который был выполнен щелчок, а затем вручную выполнить его:

$("li.page-item-11 a").click(function(){
    var clickedAnchor = this;
    allDivs.slideUp(500, function(){
        $("#introductie").slideDown(500,function(){
            location.href = clickedAnchor.href;
        });
    });
    return false;
});

(Первый обратный вызов на самом деле не должен быть встроенной литеральной функцией, подобной этой, но другие делают это для того, чтобы закрыть clickedAnchor значение.)

Answer 2

Единственное, что вы можете сделать, это обернуть весь процесс анимации в .animate(), а затем использовать обратный вызов, чтобы перейти на новую страницу. Обратный вызов в.animate() происходит, когда анимация завершена. Это должно дать вам поведение, которое вы ищете.

Answer 3

Проверьте встроенные комментарии. Упрощенный первоначальный выбор. Для загрузки новой страницы используйте slideDown Перезвоните.

function slideUp(){
    allDivs.slideUp(500, slideDown);
}
function slideDown(){
    $("#introductie").slideDown(500, function() {
        /* load the new page here */
    });
}
$(function() {
    //you can select multiple elements like this
    var allDivs = $("#introductie, #agenda, #werk, #onderwijs-organisatie, #publicaties, #links, #contact");
    console.log(allDivs);
    $("li.page-item-11 a").click(slideUp);
});

Answer 4

Большое спасибо всем вам за помощь!

Мне потребовалось некоторое время, чтобы получить правильный код (вроде...), потому что не так уж много можно скользить вниз, когда новая страница еще не загружена, поэтому я не мог использовать обратный вызов slideDown.

Теперь у меня есть временное решение: я использую операторы if, чтобы определить, на какой странице я нахожусь, а затем делаю вторую половину анимации, slideDown-part. Для первой части анимации, части slideUp, в качестве обратного вызова у меня есть "location.href" с "return false", как продемонстрировал Phrogz.

Как это:

menuLinks.click(function() 
{
var clickedAnchor = this;

            allDivs.slideUp(750);
            mainDiv.fadeOut(500, function() 
            {
                location.href = clickedAnchor.href;
            }); 
return false;    
});

И затем, после перезагрузки страницы (и еще нескольких операторов if, по одному для каждой страницы):

if (currentLocation.substr(0,52) == introductiePage) 
    {       
        introductieMenu.css({color:"#FF844A"});
        introductieDiv.hide();
        mainDiv.hide(function()
        {
            mainDiv.fadeIn(750);        
            introductieDiv.slideDown(750);
        });         
    }

Теперь я застрял, потому что мне нужно найти способ реализовать разницу между переходом с одной страницы на другую и переходом с одной подстраницы на другую подстраницу, с одной страницы на другую и т. Д. Но это будет другая тема.