Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Jquery Slider
<html>
<head>
<style>
html, body {
height:100%;
font-family: Arial, Verdana, Tahoma;
}
#nav {
width: 50px;
height:270px;
position: fixed;
top: 0px;
left: -50px;
background: #333;
padding:10px 0 10px 0;
}
a {
padding: 10px;
text-decoration: none;
color: #fff;
font-size: 40px;
display:block;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://raw.github.com/richardscarrott/jquery-mousestop-event/master/jquery.mousestop.js"></script>
<script>
$(document).ready(function() {
var timeout, p = $("#nav"), mouseActive = false;
$(document).mousemove(function() {
clearTimeout(timeout);
mouseActive = true;
}).mousestop(function(){
hide();
}).mouseout(function(){
hide();
});
function hide() {
timeout = setTimeout(function(){mouseActive = false;}, 1000);
}
interval = setInterval(function() {
p.animate({
left: mouseActive ? "0px" : "-50px"
}, 300);
}, 500)
});
</script>
</head>
<body>
<div id="nav">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment