html - How to fadeOut one div and fadeIn another div with jquery timing? -

Thank you, I can get fade out of the div after 3 seconds. But after 3 seconds I can not make a second feed in the feed-in-the division is already on the zero-screen. Code is:

  $ (document) .ready (function () {$ ('# blue'). Delay (3000). FadenOut (100); $ ('# red'). Delay (3000). FadeIn (100);});  

Demo:

The idea is that div 1 (blue) is dissolved and div 2 (red) appears.

Please note: I need to hide Div 2 from how div 2 is "Always there" to show it is offset DivA because in test, div 2 appears before div 1 It covers.

You should #dialize the styles in display: none; Add so that you initially hide when opening the page.

  $ (document) .ready (function) ($ ('# blue'). Delay (3000) .Fedaut (100); $ ('# red'). Delay (3000) .Fedine (100);});  

html, body {background-color: yellow} #red {width: 300px; Height: 300px; Status: Completed; Top: 5px; Left: 5px; Z-index: 100; Background color: #F00; display none; } #Blue {width: 300px; Height: 300px; Status: Completed; Top: 10px; Left: 10px; Z-index: 200; Background color: # 00f; Cursor: indicator; }

  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/JQuery/1.0.0/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Div id = "blue" & gt; & Lt; / Div & gt; & Lt; Div id = "red" & gt; & Lt; / Div & gt;