Fade in image or(info text) in front of slider image?

My Slider contains images, 开发者_运维知识库a caption and a some info text. I want info text to be loaded (fade in) on top of its relevant slider image.

e.g slider1 one has caption1 and info text 1. slider2 one has caption2 and info text 2.

when slider1 changes from slider2, info text 2 should fade in as a separate entity on front of slider2 and so on.

this require the use of a javascript famework like jquery it would be very easy. i will give you the solution with jquery its very simple

 $(document).ready(function(){
    $("#mySlider .slider").each(function(){
    $(this).fadeIn("slow");

    });

    });
    <div id="mySlider">
    <div class="slider"><span>here is the caption </span><img src="../images/1.jpg" /> </div>
 <div class="slider"><span>here is the caption </span><img src="../images/2.jpg" /> </div>
 <div class="slider"><span>here is the caption </span><img src="../images/3.jpg" /> </div>
    </div>

the jquery code will treate all the sliders one by one and fade them in