Page transition (fadeOut, AJAX-Magic, fadeIn)

Page transition (fadeOut, AJAX-Magic, fadeIn)

Hi,
my nickname is yahooooo and I'm stuck. *g*

I'm struggeling to get this one working:

function bindlinks(){
   $("#pfeile a").unbind();

   //$("#pfeile a").bind("click", function(e){
   $("#pfeile a").one("click", function(e){
      var link = $(this).attr("href");
      //ajaxloader(link);
      ajaxfx(link);
      return false;
   });
}


$(document).ready(function(){
   bindlinks();
});

function ajaxfx(url){
   $('#loading img').css('visibility','visible');
   $('div.ajaxreplace').fadeOut('slow', function(){
      // callback fadeOut()
      $(this).load(url, '#bodywrap', function(){
         //  callback load()
         $('#loading img').css('visibility','hidden');
         $(this).fadeIn('slow', function(){
            // callback fadeIn()
            renewlinks();
            //return false;
         });
      });
   });
};

function renewlinks(){
   $("#pfeile a").unbind();
   bindlinks();
}


HTML

Something like
         <div class="ajaxreplace">
            <div id="bodywrap">
               ###CONTENT####
               <div id="pfeile" class="fade">
                  <div class="pfeilmenue">###MENU###</div>&nbsp;
               </div>   
            </div>   
         </div>   


What I'm trying to achieve, basically, is that I want to fade out the whole container ("ajaxreplace"), reload its content via load() and fade it back in afterwards. The clickable links ("#pfeile a") are located within the replaced content.

It works fine on the first click. But when I click on an AJAX-generated link, the ajaxfx() or at least load() runs twice. I get two requests and not only one. I don't understand it.

Any ideas?