Example of sliding in and out of TIPS on the left side of JQUERY

On the left side of the page, you will be prompted to slide smoothly. If you have any similar effect, you can apply it:
 
JQUERY code: Copy codeThe Code is as follows: // floating on the left
$ (". Reading"). hover (function (){
$ (This). animate ({left: "50 "});
$ (". Read"). animate ({left: "0"}, 600 );
});
$ (". Read_close"). click (function (){
$ (". Read"). animate ({left: "-287"}, 600 );
$ (". Reading"). animate ({left: "0"}, 800 );
});

HTML:Copy codeThe Code is as follows: <! -- Floating on the left -->
<Div class = "reading">
<A target = "_ blank"> </a>
</Div>
<Div class = "read">
<A target = "_ blank" class = "read_close"> </a>
<P> You can subscribe to business street business opportunity topics. You will receive the latest content from your email. </P>
<P class = "read_btn"> <a href = "#" target = "_ blank"> </a> </p>
</Div>

CSS:Copy codeThe Code is as follows:. reading {position: fixed; left: 0px; bottom: 30px; cursor: pointer; width: 25px; height: 75px;
_ Position: absolute; // compatible with IE6
_ Top: expression(eval(document.documentElement.scrollTop+document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop, 10) | 0)-(parseInt (this. currentStyle. marginBottom, 30) | 0); <PRE class = css name = "code"> // compatible with IE6, 30 from the bottom </PRE> }. read {border: 1px solid # d0d0d0; width: 285px; height: 100px;-moz-box-shadow: 0px 1px 2px # ccc;-webkit-box-shadow: 0px 1px 2px # ccc; box-shadow: 0px 1px 2px # ccc; // shadow effect, CSS3background: # fff; position: fixed; left:-287px; bottom: 30px; z-index: 10; _ position: absolute; _ top: expression(eval(document.documentelement.scrolltop#document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop, 10) | 0)-(parseInt (this. currentStyle. marginBottom, 30) | 0 )));}. read
P {font-size: 14px; line-height: 22px; padding: 15px 0 0 16px; width: 240px ;}. read p. read_btn {text-align: right; padding-top: 5px }. read_close {float: right; padding: 2px; cursor: pointer ;}< P> </P>
<PRE> </PRE>
<BR>
<BR>
<P> </P>
<P> <BR>
</P>