javascript - 运行函数以在 .load 完成时对内容进行动画处理

Question

我使用 Modernizr 中的 History API 构建了一个网站，其中包含 CSS3 页面过渡以实现平滑加载。这是相应的代码。

$(document).ready(function(event){
  var isAnimating = false,
  firstLoad   = false;

  $('.menu a').on('click', function(event){
event.preventDefault();
var newPage = $(this).attr('href');
if( !isAnimating ) changePage(newPage, true);
firstLoad = true;
  });

  $(window).bind('popstate', function() {
if(firstLoad) {
  var newPageArray = location.pathname.split('/'),
    newPage = newPageArray[newPageArray.length - 1];
  if( !isAnimating ) changePage(newPage, false);
}
firstLoad = true;
  });

  function changePage(url, bool) {
  isAnimating = true;
  $('body').addClass('page-is-changing').removeClass('show-menu');
  $('#open-button').removeClass('open');
  $('.loader').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
  loadNewContent(url, bool);
  $('.loader').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
});
if(!transitionsSupported()) loadNewContent(url, bool);
  }

  function loadNewContent(url, bool) {
url = ('' == url) ? 'index.html' : url;
var section = $('<div class="content-wrap"></div>');

//$.getScript('#page-script', function(){});

console.log(url);

section.load(url + ' .content-wrap > *', function(event){
  $('.wrapper').html(section);

  var delay = ( transitionsSupported() ) ? 1200 : 0;

  setTimeout(function(){
    $('body').removeClass('page-is-changing').remove('#page-script').load('#page-script');
    $('.loader').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      isAnimating = false;
      $('.loader').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
    });
    if( !transitionsSupported() ) isAnimating = false;
  }, delay);

  if(url!=window.location && bool){
    window.history.pushState({path: url},'', url);
  }
});
  }

  function transitionsSupported() {
return $('html').hasClass('csstransitions');
  }

我想知道的是在 loadNewContent 函数完成后如何调用函数？我想为每个页面中的内容添加动画效果，但我需要等待内容加载后才触发。

谢谢!杰西

Answer 1

您可以使用 jQuery 的 .promise() 和 .done() 来做到这一点

$('example').fadeOut().promise().done(function(){
 // code here executes when the animation is finished.
});

在这里添加 .load() 有一个回调，如下所示:

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

更多信息:http://api.jquery.com/load/