jQuery .fadeOut在页面切换后应用

Question

我正在使用这里所述的加载内容的方法http://css-tricks.com/rethinking-dynamic-page-replacing-content/但是我遇到了jQuery函数的问题.fadeOut在内容更改后发生。因此，当用户点击导航链接时，内容会发生变化，然后新内容淡出然后淡入。在演示中，内容淡出，变化，然后新内容淡入。

这里是唯一的部分jQuery，我已经改变，以适应我的网站。

function loadContent(href){ 
    $mainContent 
      .find("#guts") 
      .fadeOut(750, function() { 
       $("header nav ul li a").removeClass("current"); 
       console.log(href); 
       $("header nav ul li a[href$='"+href+"']").addClass("current"); 
       $mainContent.hide().load(href + " #guts", function() { 
        $mainContent.fadeIn(750, function() { 
         $pageWrap.animate({ 
          height: baseHeight + $mainContent.height() + "px" 
         }); 
        }); 
       }); 
      }); 
} 

编辑：我忘了补充，该脚本出现在Firefox中工作正常，但无法在Chrome

Answer 1

我们解决这个得到的方式是使用2“页”，其中之一是不可见。

<div id="page">The actual visible page</div> 
<div id="holder">The 'hidden' page</div> 

我们会再加载内容到夹，然后淡出，淡入，然后切换。这是一个基本的脚本，显示我的意思

<script> 

    // load the content into the hidden div 
    function loadContent(URL) { 

     // show a loading gif or something 
     $('#loading').show(); 

     // grab new page content 
     $('#holder').load('URL', function() { 

      // remove loading gif 
      $('#loading').hide(); 

      // fade divs 
      replaceDivs(); 

     }); 
    } 

    // fade out old div, fade in new div, replace content and switch 
    function replaceDivs() { 

     // fade out old div 
     $('#page').fadeOut(750, function() { 

      // fade in new div 
      $('#holder').fadeIn(750, function() { 

       // add content to old div 
       $('#page').html($('#holder').html()); 

       // show old div 
       $('#page').show(); 

       // hold new div until next click 
       $('#holder').hide(); 

      }); 
     }); 
    } 
</script>