jquery - jquery ajax 显示功能

Question

我一直在使用这个函数从 php 文件中加载数据：

$('#form form').submit(function(){
    $('#content').empty();
    $.get('data.php', $(this).serialize(), function(data){                          
        $('#content').html(data);               
    });         
    return false;
});

我想要的是用一些动画来显示数据，比如fadeIn效果。

Answer 1

你可以这样做：

$('#form form').submit(function(){
$('#content').empty();
$('#content').fadeOut();
$.get('data.php', $(this).serialize(), function(data){                          
$('#content').html(data);   
$('#content').fadeIn();            
});         
return false;
});

Answer 2

使用对 htynkn 答案的建议编辑，您可以执行以下操作：

$('#form form').submit(function(){
    var $content = $('#content');
    $content.empty().fadeOut();
    $.get('data.php', $(this).serialize(), function(data){                          
        $content.html(data).fadeIn();            
    });         
    return false;
});

通过声明局部变量，您可以获得缩小和效率的好处，而且$content您可以按照建议进行链接。您也可以只使用.hide()而不是.fadeOut().