Исчезать и выводить контент с помощью jquery address (ajax)

Question

Как мне сделать так, чтобы контент, уже загруженный, исчезал после загрузки нового контента, а затем этот новый контент исчезал.

Я использую адрес jquery, чтобы попытаться добиться этого, если его проще / лучше с другим плагином, предложите один:-)

У меня есть следующий код:

    function loadURL(url) {
        console.log("loadURL: " + url);
        $("#content").load(url);
    }

    $.address.init(function(event) {
        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
    }).change(function(event) {
        $("#content").load($('[rel=address:' + event.value + ']').attr('href'));
        console.log("change");
    })

    $('a').click(function(){
        loadURL($(this).attr('href'));
        $("#content").hide();
        $("#content").fadeIn();
    });

Я действительно пытался подумать, что, возможно, я мог бы создать div для загрузчика, который я бы использовал не поверх контента, а над ним, но я действительно не знаю, куда с ним идти.

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

Любая помощь будет принята с благодарностью!

Answer 1

Похоже, эта скрипка - то, что вы ищете. Я использую jQuery.ajax()

$('#b').click(function(){
    $.ajax({

      //i had to create another test fiddle to overcome the 'same origin' issues
      url: 'http://fiddle.jshell.net/K6YPD/show/',
      success: function(data) {             

          //we have the data now
          $('#content').fadeOut(1500, function() {
            //this is a callback once the element has finished hiding

              //populate the div with whatever was returned from the ajax call
              $('#content').html(stripHTML(data));
              //fade in with new content
              $("#content").fadeIn(1500);
          });
      }
    });
});