Добавьте класс в ‹html› по щелчку ссылки и добавьте задержку Перенаправление (страница исчезновения)

Пытаюсь добавить переходы между страницами. Переход fadeIn выполняется с помощью загрузчика WebFont и анимации CSS. Я хочу добавить класс к тегу html при щелчке по ссылке и подождать 1 секунду (для анимации CSS fadeOut), а затем перенаправить на ссылку.

Это измененная версия этот код jQuery:

$(document).ready(function() {

  $("a").click(function(event){
    event.preventDefault();
    redirectLink = this.href;
    $("body").fadeOut(1000, redirectToLink);      
  });

  function redirectToLink() {
    window.location = redirectLink;
  }
});

Я настроил его, но мне кажется, что с .delay(1000, redirectToLink) возникла проблема, и он не работает. Я не очень разбираюсь в JS, поэтому буду очень признателен за вашу помощь.

$(document).ready(function() {


  $("a").click(function(event){
    event.preventDefault();
    redirectLink = this.href;
    $("html").addClass('wf-next').removeClass('wf-active wf-inactive wf-loading').delay(1000, redirectToLink);      
  });

  function redirectToLink() {
    window.location = redirectLink;
  }
});

javascript transition jquery css-transitions fade
person reitermarkus    schedule 06.07.2012    source источник

Ответы (2)


arrow_upward
4
arrow_downward

.delay () предназначен для использования с анимацией, но вы переместили анимацию в переход css. Вместо этого я бы использовал setTimeout вот так:

  $(document).ready(function() {

    $("a").click(function(event){
      event.preventDefault();
      redirectLink = this.href;
      $("html").addClass('wf-next').removeClass('wf-active wf-inactive wf-loading');
      setTimeout(function(){
        redirectToLink(redirectLink);
      }, 1000);
    });

    function redirectToLink(url) {
      window.location = url;
    }
  });
person Phil Gran    schedule 06.07.2012
comment
Да, задержка - это просто установка задержки с использованием settimeout, лучше в таких ситуациях - person Ajay Beniwal; 06.07.2012

arrow_upward
0
arrow_downward

Попробуй это:

  $(document).ready(function() {


    $("a").click(function(event){
      event.preventDefault();
      redirectLink = this.href;
      $("html").addClass('wf-next').removeClass('wf-active wf-inactive wf-loading').fadeIn(1000, function(){ redirectToLink(redirectLink) } );      
    });

    function redirectToLink(url) {
      window.location = url;
    }
  });
person Control Freak    schedule 06.07.2012
comment
Тоже не работает, ссылка перенаправляется сразу при нажатии. Взгляните: reitermark.us/lab/loading/index.html (щелкните перезагрузить ссылку внизу) - person reitermarkus; 06.07.2012
comment
Это, вероятно, сработает, но не имеет особого смысла использовать JS fadeIn, чтобы заставить CSS fadeOut работать. - person reitermarkus; 06.07.2012