I am attempting to create a scrolling effect on my UL element when the mouse hovers over it, but I am having trouble getting it to work. Here is the link to my fiddle: http://jsfiddle.net/MisterStorm/4ja9apqz/3/ and here is my code:
$(document).ready(function () {
$('#next').hover( function () {
scrollCallback = setInterval(function () {
$('#divContainer ul').animate({
'scrollLeft': $('#divContainer ul').offset().left
}, 500);
console.log($('#divContainer ul').offset().left);
}, 50);
}, function () {
clearInterval(scrollCallback);
});
});#divContainer {
width:300px;
overflow:hidden;
border:solid 1px #000;
position: relative;
height:20px;
}
#divContainer ul {
list-style-type: none;
position:absolute;
top:0px;
left:0px;
margin:0;
padding:0;
}
#divContainer ul li {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 13px;
display: inline;
margin-left: 3px;
margin-right: 3px;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divContainer">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</div>
<div id="next">next</div>Any assistance would be greatly appreciated! Thank you!