【发布时间】：2011-06-15 16:29:53
【问题描述】：
下面的代码运行良好，完全符合它在锡上的说明。它只是做得不太好。
该项目涉及主从系统。一个是大屏幕地图，另一个是带有很多按钮的小触摸屏。用户可以通过按下按钮打开和关闭地图图层（透明 PNG）。我正在使用一个非常小的 MySQL 数据库作为“中间人”，控制页面上的按钮将记录设置为 1 或 0，并且地图页面每 100 毫秒（或其他任何时间）轮询一次数据库并寻找更改。两个页面都在同一个服务器上运行（一个系统只是充当一个愚蠢的终端）
这一切都像一个魅力，但褪色动画效果不佳。如果我不断地切换按钮，图层会淡入淡出……有时。大多数情况下，图层只是出现和消失，但在动画应该采用的相同间隔内。地图层是半透明的盒子，根据显示或不显示的图层使图例变暗（只是让你知道）
我似乎无法弄清楚如何使动画平滑。有任何想法吗？另外，如果有人知道如何让一个网页控制另一个网页而无需像这样的轮询，我很想知道，到目前为止，这是我能想出的唯一解决方案。
var layerChange = setInterval(function() {
$.ajax({
type: 'GET',
url: '/php/db-get-layers.php',
dataType: 'json',
success: function(data) {
$.each(data, function(key, value) {
if (value == 0) {
$('#legend-' + key).fadeOut(400);
$('#map-layers #' + key).fadeIn(400);
} else {
$('#legend-' + key).fadeIn(400);
$('#map-layers #' + key).fadeOut(400);
}
});
},
});
}, 100);
这是php文件
<?php
include('../config/config.php');
include('../config/db.php');
$provinces = $_GET['layer'];
$selectQuery = "SELECT oil, naturalgas, hydro, wind, coal, nuclear, tidal, thermal, solar FROM layers";
$query = mysql_query($selectQuery) or die(mysql_error());
$output = mysql_fetch_array($query, MYSQL_ASSOC);
echo json_encode($output);
?>
提前感谢您的帮助。
更新：地图页面的相关 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Map of Canada</title>
<link rel="stylesheet" href="/styles/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/styles/structure-map.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/styles/maps.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/styles/fonts.css" type="text/css" media="screen" />
<script src="scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="scripts/kiosk-map.js" type="text/javascript"></script>
</head>
<body>
<!-- Page Container -->
<div id="site-wrapper">
<section id="map-layers">
<div id="basemap" class="canada"></div>
<div id="oil" class="canada"></div>
<div id="naturalgas" class="canada"></div>
<div id="rivers" class="canada"></div>
<div id="hydro" class="canada"></div>
<div id="wind" class="canada"></div>
<div id="coal" class="canada"></div>
<div id="nuclear" class="canada"></div>
<div id="tidal" class="canada"></div>
<div id="thermal" class="canada"></div>
<div id="solar" class="canada"></div>
<div id="labels" class="canada"></div>
</section>
<section id="map-legend">
<div id="legend"></div>
<div id="legend-oil" class="legend-overlay"></div>
<div id="legend-naturalgas" class="legend-overlay"></div>
<div id="legend-hydro" class="legend-overlay"></div>
<div id="legend-wind" class="legend-overlay"></div>
<div id="legend-coal" class="legend-overlay"></div>
<div id="legend-nuclear" class="legend-overlay"></div>
<div id="legend-tidal" class="legend-overlay"></div>
<div id="legend-thermal" class="legend-overlay"></div>
<div id="legend-solar" class="legend-overlay"></div>
</section>
<!-- End Page Container -->
</div>
</body>
</html>
文件kiosk-map.js 包含上面包含的JS 代码——只有那个代码，没有别的。
【问题讨论】：
-
什么版本的浏览器正在显示淡入/淡出失败的地图图像？
-
我正在使用 Safari（以及 Plainview - 仍然是 webkit），并且从一开始褪色就失败了。如果我真的快速设置和取消设置图层（尽可能快地按下按钮），那么淡入淡出往往会起作用（有时再次）。如果我在按钮之间等待一两秒钟，则按下淡入淡出失败。我不知道为什么。
-
你能发布 HTML（或者至少是相关部分吗？）。根据您提供的代码，我看不出有任何原因无法正常工作。如果您发布您的 HTML，我可以在我的服务器上试用它，看看会发生什么。