I would like to animate the caption of Twitters Bootstrap carousel. In the caption I got a h1-Tag and four h4-Tags.

I want the h1 fade in first and after I want to fade in the h4-Tags. Before sliding to the next image, I want to fade out the h4-Tags and then the h1-Tag.

My slider.js:

$('#carousel-example-generic').on('slide.bs.carousel', function () {
    $("h1").fadeIn(2000);
});

$('#carousel-example-generic').on('slid.bs.carousel', function () {
    $("h1").fadeOut(2000);
});

My HTML:

    

    
    

        

        

        

    

    
    

        

            
            

                
Here is a test title
                
Test
                
Test
                
Test
                
Test
            
        
        

            
            

                
Here is a test title
                
Test
                
Test
                
Test
                
Test
            
        
        

            
            

                
Here is a test title
                
Test
                
Test
                
Test
                
Test
            
        
    

    
    
        
        Previous
    
    
        
        Next
    

Another problem is that my animation only works on the second slide. How can I animate the elements inside the caption like I described? Here is my Fiddle: http://jsfiddle.net/7fh3o32y/