使用jquery地址(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);
          });
      }
    });
});