slider - animation functions JQuery -

I'm breaking my head on this. I have the following code:

  & lt; Html & gt; & Lt; Top & gt; & Lt; Link rel = "stylesheet" type = "text / css" href = "bannerTest.css" & gt; & Lt; Script type = "text / javascript" src = "http://code.jquery.com/jquery-1.4.2.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "banner" id = "box" & gt; & Lt; Script & gt; $ (Document) .ready (function () {setTimeout (function () {$ ("# box"). ({Height: "300px"}) $ ("# box"). Animate ({width: "100 % "});}, 100);}); & Lt; / Script & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

css

 . Banner {background: # 98bf21; Height: 100px; Width: 100px; Margin: 6px; }  

OK, so when the page has set the slide slide down, and later it is horizontally inside a div tag

So if I want to now have a blue square that slides down too Does, how should I do this?

I was thinking that I I can create a new div, but certainly did not work. I tried to do something like that, but I also need a "baibabox" style, but I think something is wrong. Something I think is wrong.

  & lt; Div class = "banner" id = "box" id = "leftbox" & gt; & Lt; Script & gt; $ (Document) .ready (function () {setTimeout (function () {$ ("# box"). ({Height: "300px"}) $ ("# box"). Animate ({width: "100 $ {"}); $ (" # Leftbox "). Animate ({width:" 10% "}}}}, 100); // 1000 milliseconds is delayed;); & Lt; / Script & gt; & Lt; / Div & 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; / Head & gt; & Lt; Body & gt; & Lt; Div class = "banner" & gt; & Lt; Div class = "banner-blue" & gt; & Lt; Script & gt; $ (Document) .ready (function () {$ ("banner"). Animate ({height: "300px"}, 1000); $ ("banner"). Animate ({width: "100%"} , 1000); $ ("banner-blue"). Animate ({height: "300px"}, 1000);}); & Lt; / Script & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

CSS:

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

If I understand you correctly, you want green The box will be parked and blue to expand horizontally and horizontally.

Here is a work JSFiddle that has a solution:

In your code, you have the following:

  & lt; Div class = "banner" id = "box" id = "leftbox" & gt;  

Two things about ID:

• You can only have one copy element
• Need for ID is unique, therefore You have two elements with the ID of 't box

  I have used sections of the ID instead of selectors because it keeps your elements clean and You do not have to declare both and a class.

  I would also suggest that you organize your pages instead of the elements by placing all of your tags at the top of the page.

  I know that this is what you were trying to achieve.

  UPDATE

  I have the banner-blue animation in callback, meaning it only banner animation After the expiration:

    $ (document) .ready ({Width: "100%"}, 1000, function () ($ (".") {$ ( Banner-blue "). Animate ({height:" 300px "}, 1000);});});