I'm having problems with this animated menu. It works most of the time, but starts to do weird things when you click on 'Education' here > http://www.johnnyno.co.uk/
<!--HTML-->
<div class="nav-collapse collapse pull-right navigation">
<ul class="nav">
<li class="active first"><a href="#keypoints">Professional Profile</a></li>
<li><a href="#experience">Work Experience</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#education" class="current-band">Education</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</div>
<!--jQuery-->
(function ( $ ){
/* Animate nav */
var $currentband = $('<div class="current-band" />');
var $current = $('.navigation ul li.active');
var position, left, width;

$('.navigation').prepend($currentband);

moveCurrentBand($current);

$(".navigation ul li").mouseenter(
function(){
moveCurrentBand($(this));
}).mouseleave(
function(){
if (!$(this).hasClass('active')){
moveCurrentBand($current);
}
}).on('click touchend', function(e){
$(this).addClass('active').siblings().removeClass('active');
$current = $('.navigation ul li.active');
return true;
})

function moveCurrentBand($elem){
position = $elem.position();
left = position.left;
width = $elem.innerWidth();
$currentband.stop(true, false).animate({left:left, width:width},{duration:1000, easing:'easeOutElastic'});
}