1
下面的代碼工作得很好，它的確如它所說的那樣。它只是做得不好。查詢MySQL和淡入淡出的元素
該項目涉及一個主從系統。一個是大屏幕地圖，另一個是帶有大量按鈕的小型觸摸屏。用戶可以通過按下按鈕打開和關閉地圖圖層（透明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);
?>
感謝。
更新：對於地圖頁面
<!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的培訓相關HTML包含上面包括JS代碼 - 只有代碼，沒有別的。
什麼版本的瀏覽器顯示淡入/淡出失敗的地圖圖像？ – 2011-06-15 16:36:03
我正在使用Safari（well plainview - 仍然是webkit），並且淡化從一開始就失敗了。如果我真的很快設置並取消設置圖層（儘可能快地按下按鈕），那麼淡入淡出往往會起作用（有時再次）。如果我在按下淡入淡出的按鈕之間等待一兩秒鐘。我爲什麼不知所措。 – archdata 2011-06-15 16:59:03
你可以發佈HTML（或至少是相關的部分？）。根據您提供的代碼，我沒有看到任何原因無法解決問題。如果你發佈你的HTML，我可以在我的服務器上試試看看會發生什麼。 – 2011-06-15 17:21:53