jquery - text inside query banner -

I'm trying to create a JQuery banner. My code looks like this: So far there is a video of my banner:

My code looks like this:

  & lt; Html & gt; & Lt; Top & gt; & Lt; Link rel = "stylesheet" type = "text / css" href = "bannerTest.css" & gt; & Lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script & gt; $ (Document) .ready (function () {$ ("banner"). Animate ({height: "300px"}, 600); $ ("banner"). Animate ({width: "100%"} , 350, function () {$ ("banner-blue"). Animate ({height: "300px"}, 700);});}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "banner" & gt; & Lt; Div class = "banner-blue" & gt; Test & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

CSS:

 . Banner {background: # 98bf21; Height: 100px; Width: 300px; Margin: 6px; }. Banner-blue {background: # 0000ff; Status: Completed; Width: 300px; }  

When the blue square is loaded on the left, I have to do some text that fade inside. But I really doubt that where does it keep in the code? In the class: Banner-blue I have put the word "test" when the site is loading, it says test from the beginning. I am thinking that I have to make a script where the text is delayed? If that's the case, then I do not know how to make a link to the script, when there is a section called "Banner-Blue" in the same device already?

Hope someone can help me

Best regards

You can use the callback function of the code> (<. Banner-blue"). Animate () -function:

jQuery

  $ ({height: "300px"}, 700, function () {$ ('hidden'). Text element is fade after episode}} ;);  

HTML

  & lt; div class = "banner-blue"> << Class = "hidden" & gt; test & lt; / p & gt; // a class or i in terms of its text  

CSS

 . Hide {display : None;}