jQuery的Ajax和HTML回调

Question

我有这样的代码，执行时，点击一个链接：

$.get(file.html, function(data) {   
    $('selector_1').html($(data).find('selector_2').html()); 
}); 

我想修改代码以这样的方式，当我点击一个链接时，$.get命令运行而selector_1淡出，并且当放置selector_1的HTML时，它将淡入。

这怎么办？

Answer 1

假设selector_1和selector_2只是一个示例，请尝试使用fadeOut回调的下面的代码。

$('selector_1').fadeOut(300, function() {   
    $.get(file.html, function(data) { 
     $('selector_1') 
      .html($(data).find('selector_2').html()) 
      .fadeIn(); 
    });  
}); 

还要注意的是$.get被包裹在fadeOut回调里面，这样的过渡是完美的。

这也是我想到的解决办法，但问题是，$.get命令淡出，而不是同时发出之后 - 我希望$.get命令立即执行。

见下文。

$('selector_1').fadeOut(300); 
$.get(file.html, function(data) { 
    $('selector_1') 
     .html($(data).find('selector_2').html()) 
     .fadeIn(); 
});