Solved

jquery animate background color on mouseover

Posted on 2012-03-22
8
408 Views
Last Modified: 2012-04-08
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

0
Comment
Question by:Refael
  • 4
  • 2
  • 2
8 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37755983
$(this).animate({'background-position': '10px -15px'}, 1000);

assuming you use a new-ish jQuery
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 150 total points
ID: 37755985
You MAY still need a plugin

http://keith-wood.name/backgroundPos.html
0
 

Author Comment

by:Refael
ID: 37756222
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37756243
so try

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

but why not just toggle the class?
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 16

Accepted Solution

by:
Steve Krile earned 350 total points
ID: 37756591
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

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37757029
A toggle would do the same. No need fo UI
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 37757291
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."
0
 

Author Closing Comment

by:Refael
ID: 37821884
Thank you!
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now