我有一个 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;
}