1

一旦加载了新内容，我将如何让已经加载的内容淡出，然后这个新内容淡入。

我正在使用 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，我会在顶部淡入而不是淡出内容，但我真的不知道该去哪里。

目前内容淡入，一旦你点击另一个链接，它就会变成新内容，也会淡入，但我不知道在新内容淡入之前如何让它淡出。

任何帮助将不胜感激！

4

1 回答 1

5

听起来这个小提琴就是你要找的。我使用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);
          });
      }
    });
});
于 2012-10-08T19:33:10.943 回答