3

我有一个 Javascript 函数，当被调用时，它会显示 CSS div #mapLoading并附加 style display:block。完成此操作的代码行如下：

代码 #1

 mapLoading.style.display = "block";

该功能的全部内容显示在此问题的底部。

我还有以下 jQuery 代码，.weareloading当鼠标悬停在元素上时附加 CSS 类，然后.weareloading在 CSS3 动画（旋转和淡入）完成后删除该类。

代码 #2

$("#mapLoading").hover(function(){
  $(this).addClass("weareloading");})
$("#mapLoading").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("weareloading")  
})

我想做的 - 以及这个问题的原因 - 如下：

  • 将代码 #1替换为 Javascript 函数中的代码 #2
  • 删除代码 #2中的鼠标悬停要求，以便下面显示的函数简单地添加类，然后在动画完成.weareloading后删除该类。.weareloading

不幸的是，整个程序很复杂，包含很多文件，所以我无法在 jsFiddle 上提供一个实时示例。但是，这里是上面引用的 Javascript 函数，它有望为这个问题提供足够的上下文：

第 2 行包含代码 #1

function doSearch(keyword, type) {
 mapLoading.style.display = "block";
  currentCategory = type;
  var icon;

        if (markerGroups[type]) {

        for (var i = 0; i < markerGroups[type].length; i++) {
          markerGroups[type][i].setMap(null);
        }
        markerGroups[type].length = 0;
        }


  if (keyword.substr(0,3) == "db:"){ 
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var swLat = southWest.lat();
  var swLng = southWest.lng();
  var neLat = northEast.lat();
  var neLng = northEast.lng();
  var dbCat = keyword.substr(3);

  var filename = dbPath + "db.php?cat="+ dbCat + "&swLat="+ swLat + "&swLng="+ swLng + "&neLat="+ neLat + "&neLng="+ neLng + "&extendLat="+ extendLat + "&extendLng="+ extendLng;
    $.getJSON(filename, function(data) {
   var hider = document.getElementById(type).getAttribute("caption");
    if (hider != "hidden") {
        for (i = 0; i < data.results.length; i++) {
            var result = data.results[i];
                if (result.icon === "" ) {
                    icon = type;
                } else {
                    icon = result.icon;
                }
            cleanHTML = html_entity_decode(result.html);
            var xmlHTML = createXmlHTML(result.address, result.name, cleanHTML, result.url, result.geometry.location.lat, result.geometry.location.lng);
            var latlng = new google.maps.LatLng(parseFloat(result.geometry.location.lat), parseFloat(result.geometry.location.lng));
            createMarker(latlng, i, xmlHTML, type, icon, "db", result.name);
      }
  }
     mapLoading.style.display = "none";
});

  } else {
                var hider = document.getElementById(type).getAttribute("caption");
                if (type == "user") {
                var userName = document.getElementById(type).getAttribute("name");
                    if (userName === null) {
                            hider = "hidden";
                    } else {
                        keyword = "establishment";
                        searchName = userName;
                    }
                }
                if (hider != "hidden") {
                var searchName = document.getElementById(type).getAttribute("name");
                if (searchName === null){
                    searchName = "";
                } else {
                    searchName = "&name=" + searchName;
                }
                    var ctr = map.getCenter();
                    //alert("Center: " + ctr)
                    var jsonLAT = ctr.lat();
                    var jsonLNG = ctr.lng();
                    if (autoRadius === true){
                        searchRadius = distance( map.getBounds().getNorthEast().lat(), map.getBounds().getNorthEast().lng(), map.getBounds().getSouthWest().lat(), map.getBounds().getSouthWest().lng());
                    }
                    var JSON = dbPath + "jsonproxy.php?url=" + encodeURIComponent("https://maps.googleapis.com/maps/api/place/search/json?location=" + jsonLAT + "," + jsonLNG + "&radius=" + searchRadius + "&types=" + keyword + searchName + "&sensor=false");
                    $.getJSON(JSON, function(data) {
                            for (i = 0; i < data.results.length; i++) {
                              var result = data.results[i];
                              var latlng = new google.maps.LatLng(parseFloat(result.geometry.location.lat), parseFloat(result.geometry.location.lng));
                              var resultHTML = "api:" + result.reference;
                              createMarker(latlng, i, resultHTML, type, type, "api", result.name, result.icon);
                              if (hider == "hidden") {
                                markerGroups[type][i].hide();
                              }
                            }
                               mapLoading.style.display = "none";
                    });
                }
  }
  return 1;
}
4

1 回答 1

3

第一部分很简单，将函数的第 2 行更改为：

$("#mapLoading").addClass("weareloading");

我看不到您在函数中的哪个位置制作动画，所以我不确定在哪里删除该类。如果您使用 jQuery 动画函数，它们应该有一个回调，当动画完成时会调用它。在这个回调函数中，输入：

$("#mapLoading").removeClass("weareloading");

顺便说一句，既然您使用的是 jQuery，为什么还要使用这么冗长的原始 JavaScript？例如为什么：

document.getElementById(type).getAttribute("caption");

什么时候可以：

$('#'+type).attr("caption");
于 2012-12-23T08:35:06.393 回答