JQUERY代码:
Home > Web Front-end > JS Tutorial > JQUERY implements the slide-in and slide-out effect of TIPS on the left side_jquery

JQUERY implements the slide-in and slide-out effect of TIPS on the left side_jquery

WBOY
Release: 2016-05-16 17:31:08
Original
1216 people have browsed it

The left prompts the smoothing effect of sliding in and out. If you encounter similar effects, you can apply it:
JQUERY implements the slide-in and slide-out effect of TIPS on the left side_jquery
JQUERY code:

Copy code The code is as follows:

//Float 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 code The code is as follows:

CSS:
Copy code The 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.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)| |0)-(parseInt(this.currentStyle.marginBottom,30)||0)));
//Compatible with IE6, 30 from the bottom
}.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.documentElement. 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>




Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template