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

Who is Participating?
Steve KrileConnect With a Mentor Commented:
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">
    <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") });



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


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

Open in new window

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

assuming you use a new-ish jQuery
Michel PlungjanConnect With a Mentor IT ExpertCommented:
You MAY still need a plugin

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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.
Michel PlungjanIT ExpertCommented:
so try

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

but why not just toggle the class?
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!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.