jQuery .animate 淡入淡出发疯
Posted
技术标签:
【中文标题】jQuery .animate 淡入淡出发疯【英文标题】：jQuery .animate fade going nuts 【发布时间】：2014-06-23 08:53:37 【问题描述】：在这里完成 jQuery 的新手。它的语法与其他语言非常不同，所以我对它有点困难。我设法让它完成了我需要它做的一小部分，即改变悬停时页面的背景颜色。
但是，我悬停的按钮彼此非常靠近，如果您快速从一个按钮移动到另一个按钮，即使您停止将鼠标移到按钮。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bgcolor.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class='splash'>
<div id='logoblock'>
<img src='images/logo.png'>
</div>
<div id='menublock'>
<a href='#' id='jabout'><div id='about'></div></a>
<a href='#' id='jphoto'><div id='photo'></div></a>
<a href='#' id='jinfo' ><div id='info'></div></a>
</div>
<div id='quoteblock'
<p class=quote>"blah blah blah!"</p>
<p class=author>- John Doe</p>
</div>
</div>
</body>
</html>
bgcolor.js
// JavaScript Document
$(document).ready(function()
$( "#jphoto" ).hover(
function()
$('body').animate( backgroundColor: '#bde2ff',, 100);
,
function()
$('body').animate( backgroundColor: '#d4e88f',);
);
$( "#jabout" ).hover(
function()
$('body').animate( backgroundColor: '#f5ff53',, 100);
,
function()
$('body').animate( backgroundColor: '#d4e88f',);
);
$( "#jinfo" ).hover(
function()
$('body').animate( backgroundColor: '#fff4ff',, 100);
,
function()
$('body').animate( backgroundColor: '#d4e88f',);
);
);
我也试过把.hover()函数的OUT效果改成
$('body').css('background', '#d4e88f');
但这仍然没有解决我的问题。
如果有人在按钮之间移动得太快，我怎样才能消除这个小故障？ 非常感谢任何帮助，谢谢！
【问题讨论】：
jQuery 不是一种编程语言。 我想这真的取决于你的目标是什么。您究竟希望这些动画如何表现？下面有一些关于使用变量来控制动画是否可以触发的选项，或者您是否要停止当前动画以开始新的动画？您如何设想代码对用户交互的反应？ 【参考方案1】：您可以尝试使用$('body').stop().animate 代替$('body').animate
【讨论】：
【参考方案2】：这就是我过去的做法：
var Animating = false; // Set a variable
动画之前：
if (!Animating) // If not animating
Animating = true; // Set true
完成后：
Animating = false; // Set false
【讨论】：
以上是关于jQuery .animate 淡入淡出发疯的主要内容，如果未能解决你的问题，请参考以下文章
jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）