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

听起来this fiddle就是你要找的东西。我使用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);
          });
      }
    });
});

淡出＆amp;用jquery地址输出内容（ajax）

1 个答案: