css transition on mouseover

Question

I have the following css for my drop down menu in my banner:

#nav-menu li a
{
    background-image:url('../images/menu_background.png');  
    background-repeat:repeat-x;
    background-position: left top;
    height: 35px;
}


#nav-menu li a:hover
{
    background-image:url('../images/menu_background_hover.png');  
    background-repeat:repeat-x;
    background-position: left top;
    height: 35px;

}

It works fine, except that I would like some animation effect when I hover over the <li> tag. Currently, it just replaces the background colour of the <li> when i hover over it.

I tried the example code below which changes the margin-left of the li tag but I do not know how to animate the css transition on hover:

$j(document).ready(function () {

    //When mouse rolls over
    $j("#nav-menu li").hover(function () {

        $j(this).filter(':not(:animated)').animate({
            marginLeft: '9px'
        }, 'slow');
    },

    function () {
        $j(this).animate({
            marginLeft: '0px'
        }, 'slow');
    });

});

Thanks a lot for any suggestion.

I think this post is the proper solution for your problem, http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery — Vivek S, Sep 05 '12 at 14:30
CSS3 might be enough for your needs. See http://www.w3.org/TR/css3-transitions/ or http://www.w3schools.com/css3/css3_transitions.asp — Stefan, Sep 05 '12 at 14:30
use css instead of javascript.. http://stackoverflow.com/questions/7924038/css3-transition-not-working/8183269#8183269 — Berker Yüceer, Sep 05 '12 at 14:35

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

A quote from this post,

Blockquote I guess you would have to work around this by not using genuine background-images, but div elements containing the image, positioned using position: absolute (or fixed) and z-index for stacking. You would then animate those divs. Blockquote

edited May 23 '17 at 10:24

Community

1
1

answered Sep 05 '12 at 14:32

Vivek S

5,384
8
51
72

1

Thanks for the suggestion, am opting for css3 animations :) – Kim Sep 05 '12 at 14:38

score 0 · Answer 2 · answered Sep 05 '12 at 14:37

I got this working by removing the j after the $ in the variable names.

Fiddle: http://jsfiddle.net/XjxBj/

$(document).ready(function () {
    //When mouse rolls over
    $("#nav-menu li").hover(function () {
        $(this).filter(':not(:animated)').animate({
            marginLeft: '9px'
        }, 'slow');
    },

    function () {
        $(this).animate({
            marginLeft: '0px'
        }, 'slow');
    });
});

css transition on mouseover

2 Answers2