Animate div contents one by one

Animate div contents one by one

How to make div animation with the content one by one from "test_1.txt" and next from "test_2.txt? This what I wrote  doesn't work: Instead one by one I have animated the last file only.

function MyFunction(){
        var div = $('#my_div');
        
        div.load("test_1.txt");
        div.show("slow").
            animate({width: '400px', opacity: '0.4'}, "slow").
            animate({height: '400px', opacity: '0.8'}, "slow").
            animate({height: '10px', opacity: '0.4'}, "slow").
            animate({width: '10px', opacity: '0.4'}, "slow").
            hide("slow");
            
        div.load("test_2.txt");
        div.show("slow").
            animate({width: '400px', opacity: '0.4'}, "slow").
            animate({height: '400px', opacity: '0.8'}, "slow").
            animate({height: '10px', opacity: '0.4'}, "slow").
            animate({width: '10px', opacity: '0.4'}, "slow").
            hide("slow");            
           
}