Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery

Javascript Or Jquery Help

Post a Comment
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 afterward

Solution 1:

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

Solution 2:

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

Post a Comment for "Javascript Or Jquery Help"