Question

function pageSwap(page) {
 $(".content").fadeOut("1000",function(){
  $(".content").load(page, function (){
   $(".content").fadeIn("5000");    
  });
 });
}

This is included into my page from pageswap.js,
then

<script type="text/javascript">
 $(document).ready(function (){
   $(".content").pageSwap("main.html");
 });
</script>

I do have main.html, the script included, function called, but it won’t work..

Answer 1

You have declared a global function but haven’t extended jQuery with this function. So you simply need to call pageSwap() like below:

<script type="text/javascript">
    $(document).ready(function() {
        pageSwap("main.html");
    });
</script>

---

UPDATE: You can extend JQuery with pageSwap method using the following code:

(function($) {
    $.fn.extend({
        pageSwap: function(page) {
            return this.each(function() {
                var obj = $(this);
                obj.fadeOut("1000", function() {
                    obj.load(page, function() {
                        obj.fadeIn("5000");
                    });
                });
            });
        }
    });
})(jQuery);

However, there is another alternative approach described in @Esailija’s answer.