动画jQuery ajax结果

时间:2012-03-05 19:07:10

标签: jquery ajax jquery-animate

当ajax获取新输入时(通过超时 - 更新而不刷新),如何使jQuery具有动画效果? getAVG.php返回数据库字段的avarage。 Example page

代码:

(function(){
    var avg;
    $.ajax({
        type: "POST",
        url: "getAVG.php",
        error: function(data){
            avg = data;
            $('#kriips').animate({
                'left': avg*50
            });
            console.log("error: "+avg);
        },
        success: function(data){
            //alert(data);
            avg = data;
            $('#kriips').animate({
                'left': avg*50
            });
            console.log("suc: "+avg);
            //css('left',avg*50).animate();
        },
        timeout: 1000
    });
})();

1 个答案:

答案 0 :(得分:2)

我认为你的问题是如何在不刷新整个页面的情况下每秒重复一次ajax调用。如果是这样,只需命名该函数并在成功时调用它或使用setTimeout调用错误:

function myfunction(){
  var avg;
  $.ajax({
    type: "POST",
    url: "getAVG.php",
    error: function(XMLHttpRequest, textStatus, errorThrown){
        //your ajax request will not return the data on an error...
        console.log("error: "+errorThrown);
        setTimeout(function(){myfunction(); },1000);
    },
    success: function(data){
        //alert(data);
        avg = data;
        $('#kriips').animate({
            'left': avg*50
        });
        console.log("suc: "+avg);
        //css('left',avg*50).animate();
        setTimeout(function(){myfunction(); },1000);
    },
    timeout: 1000
  });
}