// JavaScript Document //Yulie Great //If you've added a new link button you don't need to modify this. It'll deal with it on it's own. $(document).ready(function(e) { var currentId = $("#current"); var currentIdPos = currentId.position().left; var hoverBox = $('#hoverBox'); var hoverBoxPos = hoverBox.position().left; var currentPos = currentIdPos - hoverBoxPos; var currentWidth = $("#current").width(); var hoverBoxWidth = $("#hoverBox").width(); var initialSize = currentWidth -hoverBoxWidth; $("#hoverBox").animate({ left: "+=" + (currentPos + 5) + "px", width: "+=" + (initialSize +10) + "px", }, 5); $(".menu ul li a").hover(function () { var thisWidth = $(this).width(); var hbWidth = $("#hoverBox").width(); var size = thisWidth - hbWidth; $("#hoverBox").clearQueue(); var hb = $('#hoverBox'); var p = $(this); var hbPos = hb.position().left; var elementPosition = p.position().left; var pos = elementPosition - hbPos; $("#hoverBox").animate({ left: '+=' + (pos + 5) + 'px', width: "+=" + (size + 10) + 'px', }, 250 , function(){ }); }, function () { $("#hoverBox").stop(true, true); hoverBoxPos = hoverBox.position().left; var returnPos = currentIdPos - hoverBoxPos; var currentWidth = $("#current").width(); var hoverBoxWidth = $("#hoverBox").width(); var initialSize = currentWidth -hoverBoxWidth; //alert("initialSize - " +initialSize + "returnPos(currentId - hoverBox) - " +returnPos + "HoverboxPos - " + hoverBoxPos); $("#hoverBox").delay(400).animate({ left: "+=" + (returnPos + 5) + "px", width: "+=" + (initialSize +10) + "px", }, 200); }); });