I'm currently fiddling around with jQuery's ajax method to get some data from a JSON feed and animating some bars according to the data.

As I'm hacking away, I don't really know if my approach is right.

$.ajax({

    url: "/echo/json/",
    type: "POST",
    data: data,
    success: function(data){


    $("#value1-bar .usage-bar-fill").animate({
        width: data.Value1
        }, 2500, function() {
        // Animation complete.
    });

    $("#value2-bar .usage-bar-fill").animate({
        width: data.Value2
        }, 2500, function() {
        // Animation complete.
    });

    },
    dataType: "json"
});

Is it OK to animate the divs from inside the ajax method, or is there a more correct way to do this - formatting wise, memory wise etc.?

Is it better to some how return some variables from the ajax method and executing the animation method from outside the ajax method?

Check out jsfiddle example here: http://jsfiddle.net/timkl/KPvCj/

I know this is a pretty broad question, but being a graphic designer come self-taught web designer - I never really know if what I'm doing is good practice.

Edit
Report