Home/ Questions/Q 227121
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T19:34:19+00:00

This is my website: http://keironlowe.x10hosting.com/ I need to know how to make the red

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
});
    • 0