jquery Centers objects and transitions to show and hide

Today to paste a piece of code, the function of the code is to use jquery to center the object, and transform the display and hidden ;

First create a div tag and write a CSS style, as follows

And then I want the effect is when I click on the button, test can be centered, the second click on the test disappears, the third click and Center display, so loop down ;

The specific JS code is as follows:

Explain the meaning of the code a little bit:

1, $ (' #test '). Get (0). Flag = true; To create an identity that tells the browser when it should be displayed and when it should be hidden

2, top is to let the height of the browser window minus its own height and divided by 2 is the average height, the same as left is also the case, here note that the head of the page to add code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Otherwise jquery gets a height that might not work!

This article belongs to Wang Yip Building's personal blog original, to reprint please indicate the source: Wang Ye Lou's personal blog www.ly89.cn

jquery Centers objects and transitions to show and hide