Slide out animated tab on hover
HTML
<div class="slideOutTab">
<a href="http://facebook.com">Like Us on Facebook hello</a>
</div>
CSS
div.slideOutTab {
position: fixed;
width: 150px;
height: 43px;
top: 200px;
left: -107px;
}
div.slideOutTab a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-indent: -999em;
background: 0 0 url('http://s9.postimg.org/okyi00edn/fb_like_us.gif') no-repeat;
color: #000;
}
div.slideOutTab a:hover {
background-position: 0 -43px;
}
JavaScript
// This is a shortcut for $(document).ready()
$(function() {
// This is a shortcut to bind both mouseOver and mouseOut
$('div.slideOutTab').hover(function() {
// Animate out when hovered, stopping all previous animations
$(this)
.stop(true, false)
.animate({
left: 0
}, 400);
}, function() {
// Animate back in when not hovered, stopping all previous animations
$(this)
.stop(true, false)
.animate({
left: -107
}, 400);
});
});