如何使用jquery的.load（）設置頁面之間的轉換動畫（）

Question

我有這個ajax站點，頁面通過load()加載，但是如何添加轉換？一個簡單的FadeOut + FadeIn已經很好了。

這是我用來加載它的代碼（加上加載指示器）。

我想在當前頁（只集裝箱）的淡出與淡入新的一個到達

$(document).ready(function() { 
    $('a').click(function(event) { 
     $("#container").append('<div id="loading">Loading...</div>'); 
     event.preventDefault(); 
     var url = $(this).attr('href'); 
     $('div#container').load(url, function() { $("#loading").fadeOut() }); 
    }); 
}); 

Answer 1

你需要的東西有點更細緻的比​​，這樣就可以做之前​​新的內容插入：

$(function() 
{ 
    var $container = $('#container'); 

    $('a').click(function() 
    { 
     $container.html('<div id="loading">Loading...</div>'); 

     var url = $(this).attr('href'); 

     $.get(url, function (data) 
     { 
      $("#loading").fadeOut(function() 
      { 
       // without this the DOM will contain multiple elements 
       // with the same ID, which is bad. 
       $(this).remove(); 

       $container.hide().html(data).fadeIn(); 
      }); 
     }); 

     return false; 
    }); 
}); 

（非常基本的）演示：http://jsfiddle.net/mattball/Cgqbx/

Answer 2

請確保您有沿此線HTML標記的東西：

<div id="container"> 
    <div id="content"></div> 
</div> 

CSS ：

#loading { display:none } 

然後用一些簡單的jQuery你就可以把它排序出來：

$(function() { 
    $('a').click(function(e) { 

     e.preventDefault(); 

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

     content.fadeOut(400, function() { 

      $("#container").append('<div id="loading">Loading...</div>'); 

      var loading = $('#loading'); 

      loading.fadeIn(400, function() { 
       content.load(url, function() { 
        loading.fadeOut(400, function() { 
         $(this).remove(); 
         content.fadeIn(400); 
        }); 
       }); 
      }); 
     }); 
    }); 
}); 

有意義嗎？

編輯：修改了一下。

Answer 3

如果您爲了淡入淡出內容，可以將不透明屬性設置爲動畫，而不是將元素完全淡出，以保留容器高度。

$(document).ready(function() { 
    $('a').click(function(event) { 
     $("#container").animate({'opacity': 0}, 200); 
     event.preventDefault(); 
     var url = $(this).attr('href'); 
     $('div#container').load(url, function() { 
      $(this).animate({'opacity': 1}, 200); 
     }); 
    }); 
});