Удалите старый контент, загружайте новый контент, анимируйте новый контент с помощью JQuery

Question

Прошу прощения, что я очень новичок в javascript. У меня есть некоторые поднятые аспекты JQuery, чтобы расширить дизайн моего сайта, но я никогда не изучал основы или синтаксис.

Вот что я хочу сделать: когда пользователь нажимает на ссылку в списке #nav, div #content будет анимироваться вверху экрана по высоте #content. Тогда #content будет скрыт. Затем #content будет заменен новым содержимым, загруженным со страницы, на которую ссылается ссылка, на которую пользователь нажал #nav. #content должен оставаться скрытым, а затем перемещаться под экраном по высоте окна просмотра. Затем #content будет видимым и анимированным обратно в исходное местоположение. Ниже приведен код, который я издевался, но он работает неправильно.

Спасибо!

$(document).ready(function() { 

$('#nav li a').click(function(){ 

    var toLoad = $(this).attr('href')+' #content'; 

    var oldHeight = $('#content').css("height"); 

    var viewportHeight = $(window).height(); 

    $('#content').animate({ 
     top: "-" + oldHeight 
    }, 'slow'); 

    $('#content').hide(); 

    $('#content').load(toLoad); 

    $('#content').animate({ 
     top: viewportHeight + "px" 
    }); 

    $('#content').show(); 

    $('#content').animate({ 
     top: "0px" 
    }, 'slow'); 

    return false; 

}); 

}); 

Answer 1

Что вы просите его, чтобы выполнить все после load() только тогда, когда он загружает что-то ...

load() является асинхронным, и вы можете увидеть полную подпись метода в jQuery website, где он говорит: что вы можете добавить function, который будет срабатывать при завершении загрузки.

из вашего примера просто положить все после вашей load() внутри этого метода ...

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

var clickedAnchors = []; 

$(document).ready(function() { 

    $('#nav li a').click(function() { 

     var toLoad = $(this).attr('href')+' #content';   
     var oldHeight = $('#content').css("height");   
     var viewportHeight = $(window).height(); 

     $('#content').animate({ 
      top: "-" + oldHeight 
     }, 'slow', function() { 

      $('#content').hide();   
      $('#content').load(toLoad, function() { 


      $('#content').animate({ 
       top: viewportHeight + "px" 
      }); 

      $('#content').show();   
      $('#content').animate({ 
       top: "0px" 
      }, 'slow'); 

      }); // close load 

     }); // close animate 

     return false; 

    }); // close selector 
}); // close document.ready 

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

Answer 2

Вы хотите использовать функцию обратного вызова для своих анимаций, заказ:

$(function() { 

    $('#nav li a').click(function(){ 

     //notice I used commas to separate the variable declarations, and I cached the `#content` selection since it will be used several times 
     var toLoad   = $(this).attr('href') + ' #content', 
      oldHeight  = $('#content').css("height"), 
      viewportHeight = $(window).height(), 
      $content  = $('#content'); 

     //animate the element out-of-view 
     $content.animate({ 
      top : "-" + oldHeight 
     }, 'slow', function() { 

      //once the animation is complete, load the new data via AJAX 
      $content.load(toLoad, function() { 

       //once the AJAX request is complete, then animate the element back into view 
       $content.animate({ 
        top : "0px" 
       }, 'slow'); 
      }); 
     }); 

     return false; 

    }); 

}); 

Когда вы сделаете это:

$('#content').animate({ 
     top: "-" + oldHeight 
    }, 'slow'); 

    $('#content').hide(); 

Вы говоривший принять как 750ms анимировать элемент вне зрения, но вы сразу же, говоря, «дать элемент display : none» , поэтому элемент скрывается с .hide() перед завершением вызова .animate(). Вот почему мы используем обратные вызовы.

Кроме того, если вы собираетесь использовать два или более функций на объекте JQuery, то вы должны приковать вызовов функций вместо повторного выбора элемента (ов):

$('#content').animate({ 
     top: "-" + oldHeight 
    }, 'slow').css({ color : '#fff' });