我试图在鼠标悬停时使用jQuery为backgroundColor中的更改设置动画.
我已经检查了一些例子,我似乎做对了,它适用于其他属性,如fontSize,但我使用backgroundColor和"无效属性"js错误.我正在使用的元素是div.
$(".usercontent").mouseover(function() {
$(this).animate({ backgroundColor: "olive" }, "slow");
});
有任何想法吗？
我想要做的是当用户到达网站的下一部分时,将菜单的背景从透明淡化为浅灰色.我已经搜索了一个脚本的高低,并在这里尝试了多个,但似乎没有任何工作.
任何帮助将不胜感激.
谢谢
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upbeat Designs | Freelance Web Design</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".header").addClass("scrolling");
} else {
$(".header").removeClass("scrolling");
}
});
</script>
<body>
<!-- header area -->
<div class="header">
<div id="logo">
<a href="#"><img src="images/logo.png" /></a>
</div>
<nav>
<input id="nav" type="checkbox" />
<label for="nav">
<strong>Menu</strong>
<b><i></i><i></i><i></i></b>
</label>
<menu>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a …