Question

下面的代码运行得很好，就像它在锡上所说的那样。它只是做得不好。

该项目涉及主从系统。一个是大屏幕地图，另一个是带有大量按钮的小型触摸屏。用户可以通过按下按钮来打开和关闭地图图层（透明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代码 - 只有代码，没有别的。

Answer 1

您的HTML上有重复的ID，这是无效的。试试这个

<section id="map-layers">
    <div id="basemap" class="canada"></div>
    <div id="oil" class="canada"></div>

进入这个

<section id="map-layers">
    <div class="basemap canada"></div>
    <div class="oil canada"></div>

等...

然后试试这个：

$('#map-layers .' + key).stop().fadeIn(400);

以及其他选择器等等。

Answer 2

为避免轮询，您可能会查看类似node.js的Socket.IO库。在过去的几年中，有许多新的解决方案可以实现从服务器到浏览器的实时更新。您可能想要专门询问有关轮询问题的其他问题，或在网站周围搜索现有答案。

轮询MySQL和淡出元素

2 个答案: