Animating Background colors does not stop animating!
Hi, what I'm trying to do is, when a user hover overs an element, in this case, a li within a div, I want the background color to animate to a different color besides the background color of the body (in this case, black).
It works, but the behavior is erratic. For instance, yes, the color will change when I hover over the element but it when I'm within the div ul li, and hover over for instance the paragraph, the background color of the element will animate 2-3 times.
Actually when I move around any element within that UL the animation will flicker, how would I go about stopping that?
Also sometimes, not all the times, on pageLoad, the animation will fire.
Here's the code.
-
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</title>
<!-- reference to style sheets and scripts -->
<script type="text/javascript" src="scripts/jQuery.js"></script>
<script type="text/javascript" src="scripts/jquery.color.js"></script>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#websites ul li").mouseover(function(){
$(this).animate({backgroundColor: "#2481c8"},"slow");
$(this).animate({backgroundColor: "#black"},"slow");
});
});
</script>
<link href="style sheets/global.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
hello...this is my development playspace
</div>
<div id="websites">
<ul>
<li><h3>XXXXXXXXXXXXXXXXXXXXXX</h3>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXX</p><img src="images/ncaThumbnail.jpg" alt="" width="100" height="64" />
</li>
</ul>
</div>
</form>
</body>
</html>
So all I want is, when the user hovers over the LI, the color will