jquery animate background color on mouseover

Hello Experts,

I have a menu in my site using UL LI tags (horizontal).
In the CSS i am using the a:hover where the background of the menu item changes to green color.

I am trying to use Jquery animation to animate the effect so the green background starts from left to right.

I tried this script below but unfortunately it moves the entire menu item.
I would apprentice your direction or if you can point me to an online example.

Thank you.

$(document).ready(function() {
	$("#menu a").mouseover(function() {
	  $(this).animate({"left": "50px"}, 1000); 
   });	
});

Open in new window

RefaelAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
$(this).animate({'background-position': '10px -15px'}, 1000);

assuming you use a new-ish jQuery
Michel PlungjanIT ExpertCommented:
You MAY still need a plugin

http://keith-wood.name/backgroundPos.html
RefaelAuthor Commented:
Hi mplungjan,

I have tried it and it does not work. actually i am not sure this is related? i am dealing with a mouse-over menu link that changes the background color.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Michel PlungjanIT ExpertCommented:
so try

$(this).animate({"background-color": "red"}, 1000);

but why not just toggle the class?
Steve KrileCommented:
If you don't mind including Jquery UI in your project, then you can use the built-in class switching capability to achieve this effect.  Here is a sample.  The idea is to fix your anchor tag and another block element in the <li> tags.  The anchor stays the same on hover, but you change the <div> tag by assigning it a class with a width *different* than the default class of the div.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Color Back</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript">


        $(document).ready(function () {


                $(".menu li").hover(
                    function () { $(this).children("div").switchClass("hover_off", "hover_on", "normal") },
                    function () { $(this).children("div").switchClass("hover_on", "hover_off", "fast") });

        });


        

    </script>
    <style>
        ul.menu {width: 200px;border:solid 1px Gray; padding:4px;margin:0; list-style-type:none;position:relative;}
        .menu li {position:relative;height:24px;}
        .menu li a {display:block;position:absolute;height:100%;width:100%;top:0;}
        .hover_on {background: Red;width: 100%;position:absolute;height:100%;}
        .hover_off {background: Transparent;width: 0px;position:absolute;height:100%;}

    </style>
</head>
<body>

   <ul class="menu">
    <li>
        <div class="hover_off">
        </div>            
        <a href="#">Item 1</a>
    </li>
    <li>
        <div class="hover_off"></div>
        <a href="#">Item 2</a>
    </li>
    <li>
        <div class="hover_off"></div>
        <a href="#">Item 3</a>
    </li>
   </ul>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michel PlungjanIT ExpertCommented:
A toggle would do the same. No need fo UI
Steve KrileCommented:
A toggle does not animate - which is what the original poster asked for.

"I am trying to use Jquery animation to animate the effect so the green background starts from left to right."
RefaelAuthor Commented:
Thank you!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.