Проблема Затухание в контенте

Question

Имея немного проблемы, исчезающей в содержимом с моей загрузки страницы ajax. Проблема в том, что он не исчезает, он просто показывает сразу (после задержки).

Код:

jQuery(window).on("load", function(){ 
    console.log('document ready'); 
    Initialize(); 
}); 
// Initialize all our scripts 
function Initialize(){ 
    // Ajax page loading 
    var $a = jQuery('[data-loadajax="true"]'); 
    var $body = jQuery('.main'); 
    $a.bind('click', function(e){ 
     e.preventDefault(); 
     var $this = jQuery(this); 
     var $href = $this.attr('href'); 
     $body.fadeOut('slow', function(){ 
      jQuery('#loading').fadeIn('fast'); 
      loadPage($href, $body); 
     }); 
    }); 
    // Load up the masonry stuff (now checks to see if the grid exists first) 
    FireExtras(); 
} 
function loadPage(strPageToLoad, strWhereToLoadIt) { 
    jQuery.ajax({ 
     method: 'post', 
     url: strPageToLoad, 
     cache: false, 
     dataType: "html", 
     async: true, 
     data: {'_t':Math.floor(+new Date()/1000)}, 
     success: function (html) { 
      // Get just the body 
      // Get the full HTML of the return 
      var $html = jQuery(html); 
      $container = $html.find('.main'); 
      // Get Title 
      var $title = $html.filter('title').text(); 
      // Get the Meta Description 
      var $desc = $html.filter('meta[name="description"]').attr('content'); 
      // Get the Meta Keywords 
      var $keyw = $html.filter('meta[name="keywords"]').attr('content'); 
      // Get the Meta Author   
      var $auth = $html.filter('meta[name="author"]').attr('content'); 
      // Get the scripts 
      var $scripts = $html.filter('script'); 
      // Write out the Body 
      jQuery(strWhereToLoadIt).html($container); 
      // Hide the pre-loader, and show the body 
      window.document.title = $title; 
      jQuery('meta[name=description]').remove(); 
      jQuery('meta[name=keywords]').remove(); 
      jQuery('meta[name=author]').remove(); 
      jQuery('head').append('<meta name="description" content="' + $desc + '">'); 
      jQuery('head').append('<meta name="keywords" content="' + $keyw + '">'); 
      jQuery('head').append('<meta name="author" content="' + $auth + '">'); 
      window.history.replaceState(null, null, strPageToLoad); 
      //window.location.replace(strPageToLoad); 
      $scripts.remove(); 
      // Now let's fire up the scripts again, and pull in the appropriate script files... 
      $scripts.each(function(i){ 
       //$.getScript(this.src);     
      }); 
      setTimeout(function(){ 
       console.log('Loading...'); 
       jQuery(strWhereToLoadIt).fadeIn(3000, function(){ 
        jQuery('#loading').fadeOut('fast'); 
        FireExtras(); 
       });     
      }, 10000); 
     }, 
     error: function() { 
      console.log('DANGER WILL ROBINSON!'); 
      window.location.href = strPageToLoad; 
     } 
    }); 
} 
function FireExtras(){ 
    var menu = new cbpTooltipMenu(document.getElementById('cbp-tm-menu')); 
    if(jQuery('#grid').length){ 
     new AnimOnScroll(document.getElementById('grid'), { 
      minDuration: 0.4, 
      maxDuration: 0.7, 
      viewportFactor: 0.2 
     }); 
    } 
} 

Как я могу получить success функциональность fadeIn содержание вместо отображения его сразу?

Даже .delay не работает ...

Answer 1

Издание было писать содержание в до замирания его, как только я прикован jQuery(strWhereToLoadIt).html($container); в

jQuery(strWhereToLoadIt).fadeIn(3000, function(){ 
       jQuery('#loading').fadeOut('fast'); 
       FireExtras(); 
      }); 

Таким образом, становится:

jQuery(strWhereToLoadIt).html($container).fadeIn(3000, function(){ 
       jQuery('#loading').fadeOut('fast'); 
       FireExtras(); 
      }); 

Он работает

Answer 2

Вы оживляющий opacity стиль, который по умолчанию начинается с 1. Убедитесь, что вы установите непрозрачность на 0, прежде чем начать анимировать.

jQuery(strWhereToLoadIt).css("opacity", 0).delay(1000).queue(function() { 
    ... 

Edit:
Я возьму удар на то, что я думаю, что происходит ...
Я верю, что когда вы используете fadeOut JQuery одушевляет стиль непрозрачности затем удаляет его, когда закончите, и применяет к display:none держите его скрытым. Это означает, что его значение непрозрачности вернется к умолчанию 1 после fadeOut, поэтому, когда вы пытаетесь анимировать непрозрачность до 1, это не имеет значения.

Я бы рекомендовал использовать jQuery(this).fadeIn('slow'); вместо того, чтобы оживлять непрозрачность.

Answer 3

Я не совсем уверен, что this fiddle делает то, что вы хотите.

HTML:

<button id="clickMe">click me</button> 
<div id="showUp">visible or hidden?</div> 

JQuery:

$('#clickMe').click(function() { 
    $('#showUp').hide().fadeIn(2000); 
    //FireExtras(); 
}); 

CSS: нет, укладка не до вас;)

EDIT

Прежде Алле мы должны сделать конечно, страница полностью загружена, прежде чем мы сделаем что-нибудь ng с JS/jQuery. Поэтому мы используем

$('window').ready(function(){ 
    alert('document ready'); 
    Initialize(); 
}); 

См. Обновленный fiddle.