Question

I would make this code one after the other. It’s possible?

$('#carouselselectitem1').click(function() {
    $('#foo2').animate({opacity: "0"}, function() {
        $(this).load("carousel/todos.html");
        $('#foo2').animate({"opacity":"1"});
        $('#carouselselectitem1').css({'background-color' : '#FF0000' , 'opacity' : '1'});
    });
});

Answer 1

If i understand your question right, you have to use callback functions:

$('#carouselselectitem1').click(function() {
    $('#foo2').animate({opacity: "0"}, function() {
        $(this).load("carousel/todos.html", function() {
            $('#foo2').animate({"opacity":"1"}, function() {
                $('#carouselselectitem1').css({'background-color' : '#FF0000' , 'opacity' : '1'});                          
            });
        });
    });
});