运行动画内容加载完成的函数

Question

我使用 modernizr 中的历史记录 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/

运行动画内容加载完成的函数

Run Function to animate content on .load complete

javascript

jquery

modernizr

运行 动画内容加载完成的函数

Run Function to animate content on .load complete

javascript

jquery

modernizr

运行动画内容加载完成的函数