This is my website: http://keironlowe.x10hosting.com/
I need to know how to make the red line slowly get longer when hovering over, and slowly shrink back to normal size afterwards using javascript or jQuery.
Could someone show me something to get started in the right direction?
jQuery is your best bet. The documentation has a simple example you could probably modify to fit your site: jQuery Animations
Something like this:
$('#nav_container div').hover(
function(){$(this).find('img').animate({width:'100%'},{queue:false,duration:500});},
function(){$(this).find('img').animate({width:'auto'},{queue:false,duration:500});}
);
You can use jQuery's animate to do something to an element, which includes a duration parameter that defines how long it should take for the animation to complete. Then there's the hover function which takes a set of functions. So this is the general idea:
$('div', '#nav_container').hover(function() {
// this gets called on hover
$(this).animate({width: 'XXXpx'}, 10000); // 10000 = 10 seconds
}, function() {
// this gets called on mouseout
$(this).animate({width: 'XXXpx'}, 10000); // 10000 = 10 seconds
});
EDIT:
As far as your comment, if the code is in the <HEAD>, you need to wrap the code in document.ready:
$(document).ready(function() {
// put the code you tried here
});