jQuery: при нажатии любой ссылки в меню, воспроизведении анимации и только затем перейдите по URL-адресу ссылки

Question

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

Буду признателен за квалифицированную помощь!

Answer 1

Предотвращение поведения по умолчанию, воспроизведение анимации, а затем наведение браузера на исходное место назначения.

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;

    $('#whatever').animate({
        top: '300px'
    }, 500,
    function() {
        window.location = href;
    });
});

Answer 2

Спасибо вам обоим, этот пример мне очень помог!

Мне было интересно, как это расширить, допустим, я хочу, чтобы #white переместился на 300 пикселей вверх и ПОСЛЕ этого - непрозрачность:0;

Так что в основном я хочу знать, как создать последовательность анимации перед выполнением href.

Я пытался использовать тайм-ауты, но это не работает.При этом я могу только «выстрелить» одновременно.

---

Редактировать:

Хорошо, я понял это самостоятельно.Я не уверен, почему это работает (в основном из-за моего ограниченного знания javascript), но это так, вот скрипт:

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;

    $('#whatever').animate({
        height: '500px'
      }, 700);
    $('#whatever').animate({
        width: '500px'
      }, 1000);
    $('#whatever').animate({
        opacity: '0'
      }, 1200,
    function() {
        window.location = href;
    });
});

Похоже, что время ожидания не является обязательным, эти анимации отображаются в последовательности.

Если я правильно понимаю, этот скрипт работает следующим образом:

1. определено, что ссылка не будет иметь значения по умолчанию
2. что-то с ним происходит
3. в последней части чего-то, ссылка получает обратно свое значение по умолчанию

---

Edit2: Хорошо, давайте немного усложним.Допустим, я хочу анимировать два элемента, но не одновременно.Теперь это выглядит как ситуация для тайм-аута, и опять же, поскольку каждая из этих функций происходит в последовательности, я могу фальсифицировать тайм-аут, ничего не анимируя.Например, я добавил #block, ширина которого составляет 200 пикселей, и сначала я анимирую его ширину до ... 200 пикселей, поэтому ничего не происходит, и это именно то, что я хочу.Но должен быть правильный способ сделать это, кто-нибудь может пролить свет на это?Почему эти анимации происходят в последовательности и как правильно установить время ожидания (задержать анимацию)?

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;

    $('#whatever').animate({
        height: '500px'
      }, 700);
    $('#block').animate({
        width: '200px'
      }, 1000);
    $('#block').animate({
        width: '500px'
      }, 1200);
    $('#whatever').animate({
        width: '500px'
      }, 1000);
    $('#whatever').animate({
        opacity: '0'
      }, 1200,
    function() {
        window.location = href;
    });
});