SetTimeout Application Example-move in to move out div display and hide

Effect: Move in Div1,div2 remain displayed, move out div1,div2 disappear.

The move-in Div2,div2 remains displayed, and the move-out div2,div2 disappears.

First, the HTML code

<id= ' div1 '></div><  ID = ' Div2 ' ></ Div >

Just two div modules in G, move in one, show another.

Second, CSS code

Color two div, easy to distinguish, in CSS, I set the float property, define the element in the left direction floating

1 #div1{2 Height:50px;3 background:Grey;4 width:50px;5 float: Left;Border:1px6}7 #div2{8 float: Left;Border:1px;9 Height:50px;Ten background:Blue; One width:50px; A Display:None; -      -}

Three JavaScript code

1<script>2Window.onload=function(){3     varODiv1 = document.getElementById (' Div1 ')); 4     varODiv2 = document.getElementById (' Div2 ')); 5     varTimer =NULL;6Odiv1.onmouseover=odiv2.onmouseover =function(){7 cleartimeout (timer); return value by settimeout, clear settimeout8Odiv2.style.display= ' Block ';9         Ten          One         }; AOdiv1.onmouseout = Odiv2.onmouseout =function(){ -Timer = SetTimeout (function() {//Assign a value here to the timer, because the settimeout itself returns a value. This value is a settimeout ID of the system record, which can then be canceled by this ID . -              theOdiv2.style.display= ' None '; //Set the DIV2 module to disappear after 1000 milliseconds  -},1000); -          -         } +      -      +      A     }; at  -  -  -</script>

Iv. Demonstration of Effect

SetTimeout Application Example-move in to move out div display and hide