Bootstrap手風琴並不總是在Google Maps偵聽器事件中崩潰

Question

僅當指針懸停在Google地圖上時，如何使Bootstrap手風琴顯示（即，平滑地“展開”自身），而當離開地圖時，如何隱藏（即，平滑地“折疊”自身）？

我將.collapse('show')附加到mousemove事件，並將.collapse('hide')到mouseout ，但這僅在指針緩慢進入或退出地圖時才起作用。 當運動迅速時（例如在地圖上快速滑動），手風琴將保持大約50％的時間顯示。

這是完整的代碼，顯示了我的意思：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <style>
      #map-canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(45.816175, 15.966154),
          zoom: 17
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        google.maps.event.addListener(map, 'mousemove', function(){
          $('#acc').collapse('show');
        });
        google.maps.event.addListener(map, 'mouseout', function(){
          $('#acc').collapse('hide');
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div id="acc" class="accordion-body collapse">
      <div class="accordion-inner">
        <h1>aaaaaaaaaaaaaaaaaaaaaaaa</h1>
      </div>
    </div>
  </body>
</html>

Answer 1

有兩個問題：

您沒有使用適當的事件。 每當您在地圖上移動鼠標時， mousemove觸發，而當您將鼠標懸停在地圖控件或google-logo / copyrights上時， mouseout也將觸發。 你最好使用mouseenter / mouseleave地圖容器的-events
當快速將鼠標移入和移出時，過渡之間會發生沖突，因此在另一個動畫仍在運行時，您將開始一個新的動畫。 我沒有找到使用引導程序停止正在運行的動畫的選項，因此我建議改用jQuery的slideUp / slideDown 。 效果將相同，但是jQuery有一種方法可以停止正在運行的動畫： $.stop()

實施變更：

1）刪除Bootstrap手風琴類，因為似乎沒有一種方法可以停止滾動/展開動畫（請注意，最初使用display:none樣式隱藏了內容）：

<div id="acc" style="display: none;">
  <h1>aaaaaaaaaaaaaaaaaaaaaaaa</h1>
</div>

2）用任一替換“展開”事件處理程序，

google.maps.event.addDomListener(map.getDiv(), 'mouseenter', function(){
     $('#acc').stop().slideDown('slow');
});

要么

google.maps.event.addListener(map, 'mouseover', function(){
    $('#acc').stop().slideDown('slow');
});

3）將“匯總”事件處理程序替換為：

google.maps.event.addDomListener(map.getDiv(), 'mouseleave', function(){
     $('#acc').stop().slideUp('slow');
});

Answer 2

這種基於JQuery的方法在鼠標快速移動的情況下似乎可以更順暢地工作。

$( "#map-canvas" ).hover(
  function() { 
    $('#acc').show();
  }, function() {
    $('#acc').hide();
  });

Javascript.info說：“當瀏覽器內部計時允許時，Mousemove和mouseover / mouseout觸發。” 也許這與效率有關。

Bootstrap手風琴並不總是在Google Maps偵聽器事件中崩潰

問題描述

2 個解決方案

解決方案1
1 已采納 2015-05-09 23:57:25

解決方案2
0 2015-05-09 19:40:11

Bootstrap手風琴並不總是在Google Maps偵聽器事件中崩潰

問題描述

2 個解決方案

解決方案1 1 已采納 2015-05-09 23:57:25

解決方案2 0 2015-05-09 19:40:11

解決方案1
1 已采納 2015-05-09 23:57:25

解決方案2
0 2015-05-09 19:40:11